javascript - family - Cómo saber cuándo se ha aplicado font-face

html font size

Question

Actualmente estoy creando un sitio web corporativo para un cliente que usa fuentes personalizadas de forma extensiva.

En jQuerys DOM-ready estoy haciendo cálculos de ubicación para averiguar dónde se deben colocar algunos menús emergentes con ancho y altura dinámicos según sus contenidos dinámicos.

Estos cálculos fallan, ya que DOM-ready se dispara antes de que se aplique font-face y, por lo tanto, los anchos y las alturas son incorrectos.

En este momento (para el prototipo) estoy haciendo los cálculos 500 ms después de que DOM esté listo para aliviar este problema, pero esto no puede entrar en producción por razones obvias.

El problema se ha observado en las últimas versiones de Firefox y Chrome. IE 8 no parece tener el problema, pero luego el DOM-ready se dispara bastante tarde, así que supongo que el retraso está integrado.

Esperar el evento de carga no es una opción, por lo que mi pregunta para usted es esta:

¿Existe una forma confiable de que los navegadores cruzados detecten cuándo se ha aplicado la fuente de letra?

Answer 1

Al configurar la función para que se active después de un tiempo de espera de 200 ms, se resuelve este problema al utilizar Google Fonts.

Hay un salto notable, pero generalmente hay cosas de igual altura, para los puristas esto podría no ser perfecto, pero funciona en todos los navegadores.

Answer 2

Encontré una solución después de preguntarme por qué IE no sufre este problema.

Firefox y Chrome / Safari DOMContentLoaded evento DOMContentLoaded antes de que se aplique font-face, lo que causa el problema.

La solución es no escuchar DOMContentLoaded sino ir a la vieja escuela y escuchar onreadystatechange y esperar hasta que onreadystatechange document.readyState === ''complete'' que siempre se activa después de aplicar font-face (por lo que puedo decir por mis pruebas) - que es, por supuesto, lo que siempre sucede en IE, ya que no es compatible con DOMContentLoaded .

Así que, básicamente, puedes fontfaceapplied tu propio evento en jQuery llamado fontfaceapplied , tal vez debería estar integrado;)

document.onreadystatechange = function() {
    if (document.readyState === ''complete'') 
        $(document).trigger(''fontfaceapplied'');
};

Dato curioso: Opera lo hace bien y espera activar DOMContentLoaded hasta que se DOMContentLoaded font-face.