$ .width() devuelve resultados diferentes cuando se utilizan fuentes personalizadas

Aquí está la situación:

$(document).ready(function(){ 
    // this will return different result 
    alert($('#foo').width()); 
    // than this !!! 
    setTimeout(function(){ 
    alert($('#foo').width()); 
    }, 1000); 
});

CSS (en <head> sección):

<link href='http://fonts.googleapis.com/css?family=Headland+One' rel='stylesheet' type='text/css'> 
... and 
#foo { 
    font-family: 'Headland One', serif; 
}

Cuando uso de letra estándar (por ejemplo, Arial) todo bien (.width() que devuelve el mismo resultado en ambos casos)

¿Hay alguna solución diferente a setTimeout para obtenercorrecta?valor y mantener las fuentes personalizadas?

Fuente

2012-08-26 Peter

¿Puedes mostrar qué es 'foo' por lo que respecta a la forma en que se define el elemento y si hay algún evento asociado a él? –

Encontré este: http://stackoverflow.com/questions/5539602/cant-get-right-width-or-outerwidth-of-label-element –

@OfirBaruch de hecho tuvo el mismo problema que yo – Peter

Como carga una fuente distante. Debe usar $(window).load() en lugar de $(document).ready(): el primero se activará cuando se hayan descargado todas las fuentes/hojas de estilo/guiones e imágenes distantes, el segundo solo cuando el DOM esté listo.

Fuente

2012-08-26 19:32:22 bperson

'$ (ventana) .load() 'hizo el trabajo. Gracias – Peter

Guau, ¿de verdad? He estado buscando la respuesta a esto por alrededor de un año. No puedo creer que fuera tan simple. –

$ .width() devuelve resultados diferentes cuando se utilizan fuentes personalizadas

Respuesta

Cuestiones relacionadas