Ho letto i post su questo argomento e non riesco ancora a trovare la risposta. Qualcuno ha capito come precaricare i caratteri per fermare il flicker/ritardo?Preload @ Font-Face Font per arrestare Firefox Flicker/Delay
Cheers. Erik
Combattere la FOUT in Firefox: Firefox inizia re - rendering del testo After window.load. Quindi quello che ho fatto è nascondere il contenuto come fa Paul Irish, ma dopo window.load attendo ancora 200 millisec (per dare l'ora FF per il rendering reale), e poi mostro la pagina.
Il mio sito ha un sacco di immagini, quindi per accelerare, prima spedisco la pagina senza contenuto e poi ottengo il contenuto con una chiamata ajax. Questo è un sacco di lavoro per soddisfare FF, ma i risultati sono buoni.
Questa è la mia variante di Paul irlandese, nota io uso negativo text-trattino al posto di visibilità per servire il visitatore almeno il layout veloce:
<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>
Questo è stato davvero utile, ho cambiato in 600 invece di 200 come il carattere non si stava caricando abbastanza veloce. EDIT: in seguito cambiato dopo che ho smesso di usare il carattere di Google API - troppo lento. –
Qual è il punto di ffrendertime –
Non sarebbe meglio nascondere semplicemente il testo con una classe wf-inactive sul tag html e uno stile inline nell'intestazione che nasconde tutti i nodi discendenti di .wf-inactive che contengono un elemento di testo piuttosto che una stravagante soluzione alternativa che carica il testo dopo il caricamento del DOM. Pensando che sarebbe meglio per il SEO che caricare il contenuto fisico tramite AJAX. – cchamberlain
@Erik,
C'è stato un sacco di discussioni riguardo a questo problema che Paolo chiama irlandese FOUT (lampo di testo senza stile). Ci sono numerosi modi per limitare questo
1 Mettere CSS in cima alla pagina prima di qualsiasi script tag
2 Ridurre al minimo la dimensione del file di font
3 memorizzazione nella cache del browser con un lontano futuro scade intestazioni
4 Gziping tuo CSS e file di font (WOFF non può essere compresso con gzip)
Paul irlandese ha un grande articolo su questo: Fighting the @font-face FOUT
Steve Souders ha anche un grande articolo sul suo sito web ad alta prestazione blog: @font-face and performance
Ecco una soluzione di rilevare quando i web fonts hanno caricati senza dover utilizzare i timer a tutti
duplicato: http://stackoverflow.com/questions/1330825/preloading-font-face-fonts – user123444555621