J'ai lu les articles à ce sujet et je n'arrive toujours pas à trouver la réponse. Quelqu'un at-il compris comment précharger les polices pour arrêter le scintillement/retard?Précharger les polices Font-Face pour arrêter Firefox Flicker/Delay
Cheers. Erik
Combattre la FOUT dans Firefox: Firefox commence re - rendu le texte après événement window.load. Donc ce que j'ai fait est de cacher le contenu comme Paul irlandais, mais AFTER window.load j'attend encore 200 millisec (pour donner le temps FF pour le rendu réel), puis montrer la page.
Mon site a beaucoup d'images, donc pour accélérer cela, j'envoie tout d'abord la page sans contenu, puis j'obtiens le contenu avec un appel ajax. C'est beaucoup de travail pour satisfaire FF, mais les résultats sont bons.
Ceci est mon paul variante irlandais, note-je utiliser text-indent négatif au lieu de visibilité pour servir le visiteur 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>
Ce fut vraiment utile, je l'ai changé à 600 au lieu de 200 comme la police ne se chargeait pas assez vite. EDIT: Plus tard, il a changé après que j'ai arrêté d'utiliser l'API api Google - trop lent. –
Quel est le but de ffrendertime –
Ne vaudrait-il pas mieux cacher le texte avec une classe wf-inactive sur la balise html et un style inline dans l'en-tête qui masque tous les nœuds descendants de .wf-inactive qui contiennent un élément de texte plutôt que de faire une solution de contournement farfelue qui charge du texte après le chargement DOM. Pensant que ce serait mieux pour le référencement que le chargement du contenu physique via AJAX. – cchamberlain
@Erik,
Il y a eu beaucoup de discussions au sujet de cette question qui appelle Paul Irish FOUT (flash du texte non mis en forme). Il existe de nombreuses façons de limiter ce par
1 Mettre CSS au haut de la page avant tout script Tags
2 Minimisation la taille du fichier de police
3 Mise en cache du navigateur avec un futur lointain expire en-têtes
4 Gziping votre css et fichier de police (WOFF ne peut pas être gzip)
Paul Irish a un grand article à ce sujet: Fighting the @font-face FOUT
Steve Souders a également un grand article sur son blog Sites Web de haute performance: @font-face and performance
est ici une solution de détection lorsque les polices web ont chargé sans avoir à utiliser des minuteries du tout
double: http://stackoverflow.com/questions/1330825/preloading-font-face-fonts – user123444555621