He estado leyendo las publicaciones al respecto y todavía no puedo encontrar la respuesta. ¿Alguien ha descubierto cómo precargar las fuentes para detener el parpadeo/retraso?Fuentes Preload @ Font-Face para detener Firefox Flicker/Delay
Saludos. Erik
La lucha contra el FOUT en Firefox: Firefox comienza re - procesar el texto después del evento window.load. Entonces, lo que hice fue ocultar el contenido como lo hace Paul Irish, pero DESPUÉS de window.load sigo esperando 200 milisegundos (para dar tiempo de FF para la representación real), y luego mostrar la página.
Mi sitio tiene muchas imágenes, así que para acelerar esto, primero envío la página casi sin contenido, y luego obtengo el contenido con una llamada ajax. Eso es mucho trabajo para satisfacer a FF, pero los resultados son buenos.
Ésta es mi variante Paul irlandés, tenga en cuenta que utilizar el texto-guión negativo en lugar de visibilidad para servir al visitante, al menos, la disposición más rápido:
<script>
(function(){
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
// s.textContent = 'body{visibility:hidden}';
s.textContent = 'body{text-indent:-9999px}';
e.firstChild.appendChild(s);
function f()
{
var ffrendertime = setTimeout (function(){s.parentNode && s.parentNode.removeChild(s)} , 200);
}
addEventListener('load',f,false);
setTimeout(f,2000);
}
})();
</script>
Esto fue realmente útil, lo cambié a 600 en lugar de 200 como la fuente no estaba cargando lo suficientemente rápido EDITAR: Más tarde lo cambié de nuevo después de dejar de usar la API de Google api, demasiado lento. –
Cuál es el punto de ffrendertime –
¿No sería mejor simplemente ocultar el texto con una clase wf-inactive en la etiqueta html y un estilo en línea en el encabezado que oculta todos los nodos descendientes de .wf-inactive que contienen un elemento de texto en lugar de hacer una solución absurda que carga texto después de la carga de DOM. Pensando que esto sería mejor para SEO que cargar el contenido físico a través de AJAX. – cchamberlain
@Erik,
Ha habido mucha discusión sobre este tema que Pablo llama irlandesa FOUT (destello de texto sin estilo). Existen numerosas formas de limitar esto
1 Poner CSS en la parte superior de la página antes de cualquier secuencia de comandos Etiquetas
2 Reducir al mínimo el tamaño del archivo de fuentes
3 memoria caché del navegador con el futuro lejano expira cabeceras
4 Gziping el CSS y el archivo de fuente (woff no puede ser comprimido con gzip)
Paul irlandés tiene un gran artículo sobre esto: Fighting the @font-face FOUT
Steve Souders también tiene un gran artículo sobre su alta Radiografia blog: @font-face and performance
Aquí es una solución de detectar cuando las web fuentes tienen cargado sin tener que utilizar temporizadores en absoluto
duplicado: http://stackoverflow.com/questions/1330825/preloading-font-face-fonts – user123444555621