Share
FOUT (un flash di Unstyled Text) è ciò che vedrai spesso in quel breve momento prima che un browser abbia avuto la possibilità di caricare e applicare i caratteri web. Typekit e Google Web Fonts ci offrono un modo per aggirare questo inconveniente: ecco un suggerimento per spiegare esattamente come.
Il merito va a Dan per questo, dopo che il suo recente articolo mi ha ricordato il WebFont Loader. È così utile che ho pensato che valesse la pena di dare un consiglio.
Che acronimo appropriato (in olandese significa errore). In ogni caso, quando si utilizzano i caratteri Web, devono essere caricati nel browser come risorse (proprio come immagini e script) che possono richiedere un momento. In questa situazione il tuo browser guarderà lo stack dei font ...
body font-family: 'Oswald', Arial, sans-serif;
... per determinare quale font deve essere visualizzato mentre il font web (Oswald in questo esempio) sta facendo il suo viaggio. Una volta che il font web è disponibile, ci sarà probabilmente un 'flash' quando il font fallback scomparirà e il font desiderato prenderà il posto che gli spetta. Non ideale.
Lo script webfontloader è stato creato insieme da Google e Typekit ed è reso disponibile per impostazione predefinita con entrambi i loro servizi.
Aggiunge nomi di classe al elemento per riflettere lo stato di qualsiasi webfonts da caricare. Durante il caricamento, si applica questo:
Più specificamente, le classi vengono aggiunte per ogni font nella pipeline (Droid Serif Normal 400 ad esempio):
Una volta completato il processo, queste classi vengono aggiornate:
O in caso di problemi durante il caricamento delle risorse:
Queste classi ci danno una grande flessibilità nel determinare ciò che un utente sperimenta in un dato momento nel processo di rendering dei font web. Facciamo ora un esempio per rendere le cose perfettamente chiare.
Ok, ho saltato un passaggio, presumo che tu abbia un documento html con cui lavorare. Scarica i file sorgente e troverai una cartella chiamata "demo-starting-block". Apri index.html al suo interno e sei a posto.
Vai su Google Web Fonts e seleziona un font o due da utilizzare nel tuo progetto.
Dopo aver premuto "Aggiungi alla raccolta", vai in fondo alla schermata e fai clic su "Usa" dove vedi un riepilogo della tua raccolta fino a quel momento.
Considerando che normalmente potresti scegliere di collegarti direttamente al file css memorizzato sui server giganteschi di Google, premi la scheda JavaScript e copia lo snippet che ti viene fornito.
Google suggerisce di incollare questo snippet come primo elemento dopo l'apertura etichetta - e con una buona ragione. È importante che questo script sia autorizzato ad applicare i nomi delle classi (di cui abbiamo parlato prima) il prima possibile al fine di combattere il FOUT. Se hai inserito questo JavaScript dopo tutto il resto della pagina, il font di fallback avrà la possibilità di far risaltare la sua brutta testa ...
Ecco il mio frammento, in modo sicuro a cui appartiene:
Applichiamo il nostro font Boogaloo a tutto ciò che si trova sulla pagina (non sto andando per i punti stile qui). Apri css / styles.css e fatti partire con:
body font-family: 'Boogaloo', corsivo;
Tutti gli attuali jiggery-pokery di @ font-face sono stati gestiti dal lato server da Google: dobbiamo solo utilizzare il valore come previsto.
Okay, a questo punto vedrai l'effetto FOUT su cui ho battuto tanto (anche se devo ammettere che * molto * brevemente). Se vuoi vederlo più chiaramente, prova ad aggiungere centinaia di caratteri alla tua raccolta, il che dovrebbe rallentare ...
Accentsconagua
WF- * Ci sono tutti i tipi di cose che potresti fare per il contenuto della tua pagina web, per riflettere in modo specifico lo stato di caricamento dei font. Usiamo uno pseudo-elemento per informare gli utenti su cosa sta succedendo.
Proseguendo nel nostro styles.css, aggiungi uno: dopo lo pseudo-elemento al nostro HTML mentre ha una classe wf-loading, in questo modo:
.caricamento wf: dopo / * primo passaggio, dobbiamo definire alcuni contenuti * / contenuti: "caricamento di caratteri ..."; / * diamo ora alcune dimensioni, un colore di sfondo e posizionalo sulla pagina * / larghezza: 100%; altezza: 100%; posizione: fissa; inizio: 0; a sinistra: 0; / * okay, quindi cosa vogliamo che la nostra etichetta assomigli davvero? * / color: # 135040; font-size: 1.5em; font-weight: bold; altezza della linea: 20em; allineamento del testo: centro;
Abbiamo sostanzialmente coperto l'intera pagina con un'enorme etichetta, i commenti nel CSS dovrebbero chiarire cosa sta succedendo. Ecco uno screenshot di ciò che puoi vedere mentre il carattere si sta caricando:
Ovviamente, una volta terminato il caricamento del font, le classi di caricamento vengono rimosse e sostituite con altri stati. Il :dopo lo pseudo-elemento cessa di essere, rivelando la pagina con il tuo font web applicato. No FOUT!
L'effetto che abbiamo appena raggiunto fa il suo lavoro perfettamente, ma l'etichetta scompare appena i caratteri sono caricati, rivelando bruscamente il contenuto sottostante. Possiamo migliorare su questo, sicuramente?
Frustralmente, le transizioni sui contenuti generati sono ancora debolmente supportate, quindi non possiamo fare affidamento su alcun trucco. Quello che possiamo fare è nascondere tutto il contenuto della pagina, facendolo passare una volta -caricato le classi sono state applicate.
Prova questo. Sbarazzati di tutti gli stili che abbiamo appena creato, ponendo questo in cima al tuo file css:
.caricamento di wf * / * Per prima cosa, dobbiamo nascondere tutto, ma tenete presente che ciò avrà effetto solo quando lo script di caricamento avrà avuto effetto. qui stiamo nascondendo tutti i contenuti all'interno del una volta che ha la classe "wf-loading" * / opacity: 0; body font-family: 'Boogaloo', corsivo;
Questo piccolo nugget si nasconderà (riducendo l'opacità a 0) ogni elemento all'interno html.wf-loading. È la prima regola, nascondendo tutto prima che il FOUT abbia luogo.
Con il contenuto nascosto, possiamo applicare uno sfondo al nostro elemento html.
.wf-loading / * Ecco un'immagine di sfondo (a un meer 723bytes) per indicare che sta succedendo qualcosa * / background: url ('... /images/ajax-loader.gif') centro senza ripetizione; / * solo per assicurarsi che il elemento condivide le stesse dimensioni della finestra del browser durante il caricamento (e non la pagina potenzialmente allungata) * / altezza: 100%; overflow: nascosto; Abbiamo utilizzato un loader.gif generato da uno dei tanti strumenti online disponibili. Ovviamente, qualunque sia lo sfondo che scegli, dovrebbe essere leggero. Non ha senso cercare di precaricare un file font di 20Kb visualizzando un grafico di 4Mb ...
Ora, se carichiamo la nostra pagina, tutto il contenuto è nascosto, a parte il html.wf-loading con il suo sfondo caricatore gif. Quando il carattere viene caricato, quella gif svanirà.
L'elemento html ora è stato assegnato ad altre classi, quindi usiamolo per riportare il contenuto invisibile:
.wf-active *, .wf-inactive * / * aggiungi alcuni effetti di transizione per reintrodurre gradualmente il contenuto una volta caricati i font * / -webkit-transition: opacity 1s easy-out; -moz-transition: opacity 1s easy-out; -o-transizione: opacity 1s easy-out; transizione: opacity 1s easy-out;
Indipendentemente dal fatto che il carattere sia stato caricato correttamente o non correttamente, sarà necessario rivedere il nostro contenuto. wf-loading rilascia la sua presa sull'opacità zero di tutti gli elementi sulla pagina, quindi li ricontestiamo lentamente. Ancora una volta, per rallentare, prova ad aggiungere un sacco di caratteri (o giocare con i nomi delle classi nell'ispettore degli elementi del tuo browser.) I caratteri sono anche memorizzato, quindi ogni volta che lo provate potrebbe essere necessario svuotare la cache del browser.
Semplice, ma efficace. Il mio tipo di suggerimento preferito. E le possibilità sono infinite - come suggeriresti di usare il WF- * classi?
Ultimo, ma non meno importante, non ho potuto resistere a questo preloader di Kontramax su dribbble. È un po 'pesante per i nostri scopi, ma quale è l'hey!
