Précharger les polices Font-Face pour arrêter Firefox Flicker / Delay
J'ai lu les posts sur ce sujet, et ne peut toujours pas trouver la réponse. Quelqu'un a compris comment précharger les polices pour arrêter le clignotement/retard?
Lutte contre le FOUT dans Firefox :
Firefox commence à re - rendre le texte une fois la fenêtre.la charge de l'événement.
Donc, ce que j'ai fait est de masquer le contenu comme Paul Irish, mais une fois la fenêtre.charge je encore attendre 200 millisec (pour donner des FF de temps pour que le rendu réel), puis d'afficher la page.
Mon site a beaucoup d'images, à la vitesse de cela, j'ai d'abord envoyer la page allmost sans contenu, et ensuite de récupérer le contenu avec un appel ajax.
C'est beaucoup de travail pour satisfie FF, mais les résultats sont bons.
C'est mon paul irish variante, la note I l'utilisation négative de texte-tiret à la place de la visibilité à servir les visiteurs au moins la mise en page plus rapide:
<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>
18
@Erik,
Il y a eu beaucoup de discussions sur cette question, qui Paul Irish appels FOUT (flash de texte non stylé). Il existe de nombreux moyens de limiter cette par
1 Mettre le CSS dans la partie supérieure de la page avant tout des balises de script
2 la réduction de la taille du fichier de police
3 mise en Cache du Navigateur avec un avenir lointain expire en-têtes
4 Gziping votre css et le fichier de police (woff ne peut pas être gzippé)
Lutte contre le FOUT dans Firefox :
Firefox commence à re - rendre le texte une fois la fenêtre.la charge de l'événement.
Donc, ce que j'ai fait est de masquer le contenu comme Paul Irish, mais une fois la fenêtre.charge je encore attendre 200 millisec (pour donner des FF de temps pour que le rendu réel), puis d'afficher la page.
Mon site a beaucoup d'images, à la vitesse de cela, j'ai d'abord envoyer la page allmost sans contenu, et ensuite de récupérer le contenu avec un appel ajax.
C'est beaucoup de travail pour satisfie FF, mais les résultats sont bons.
C'est mon paul irish variante, la note I l'utilisation négative de texte-tiret à la place de la visibilité à servir les visiteurs au moins la mise en page plus rapide:
@Erik,
Il y a eu beaucoup de discussions sur cette question, qui Paul Irish appels FOUT (flash de texte non stylé). Il existe de nombreux moyens de limiter cette par
1 Mettre le CSS dans la partie supérieure de la page avant tout des balises de script
2 la réduction de la taille du fichier de police
3 mise en Cache du Navigateur avec un avenir lointain expire en-têtes
4 Gziping votre css et le fichier de police (woff ne peut pas être gzippé)
Paul Irish a un excellent article à ce sujet: Lutte contre le @font-face FOUT
Steve Souders a également un grand article sur son Haute Performance des Sites web blog: @font-face et de la performance
Voici une solution de détection lorsque la web-fonts ont chargé sans avoir à utiliser des compteurs à tous les
http://smnh.me/web-font-loading-detection-without-timers/