Decidere il comportamento di un carattere web durante il caricamento può essere una tecnica importante di ottimizzazione delle prestazioni. Il nuovo descrittore di visualizzazione dei caratteri per @font-face consente agli sviluppatori di decidere come verranno visualizzati (o di riserva) i loro caratteri web a seconda di quanto tempo impiegano per essere caricati.
Differenze nel rendering dei caratteri oggi
I caratteri web offrono agli sviluppatori la possibilità di incorporare nei loro progetti una ricca grafica tipografia, con il compromesso che se l'utente non possiede già un carattere tipografico, il browser dovrà dedicare un po' di tempo a scaricarlo. Poiché le reti possono essere instabili, il tempo di download può influire negativamente sull'esperienza dell'utente. Dopotutto, a nessuno importa quanto sia bello il tuo testo se richiede una quantità eccessiva di tempo per essere visualizzato.
Per ridurre il rischio di un download lento dei caratteri, la maggior parte dei browser implementa un timeout dopo il quale verrà utilizzato un font di riserva. Questa è una tecnica utile, ma sfortunatamente i browser differiscono nell'implementazione effettiva.
| Browser | Timeout | Fallback | Scambio |
|---|---|---|---|
| Chrome 35 e versioni successive | 3 secondi | Sì | Sì |
| Opera | 3 secondi | Sì | Sì |
| Firefox | 3 secondi | Sì | Sì |
| Internet Explorer | 0 secondi | Sì | Sì |
| Safari | Nessun timeout | N/A | N/A |
- Chrome e Firefox hanno un timeout di tre secondi, dopodiché il testo viene mostrato con il carattere di riserva. Se il font viene scaricato, alla fine viene effettuato uno scambio e il testo viene visualizzato nuovamente con il carattere previsto.
- Internet Explorer ha un timeout di zero secondi che determina la visualizzazione immediata del testo. Se il carattere richiesto non è ancora disponibile, viene utilizzato un elemento di riserva e il testo viene sottoposto nuovamente a rendering in un secondo momento quando il carattere richiesto diventa disponibile.
- Safari non ha alcun comportamento di timeout (o almeno nulla oltre un timeout di rete di base).
A peggiorare le cose, gli sviluppatori hanno un controllo limitato nel decidere in che modo queste regole influenzeranno la loro applicazione. Uno sviluppatore attento alle prestazioni potrebbe preferire un'esperienza iniziale più rapida che utilizzi un font di riserva e sfruttare il carattere web più gradevole solo nelle visite successive dopo aver avuto la possibilità di scaricarlo. Utilizzando strumenti come l'API Font Upload, potrebbe essere possibile eseguire l'override di alcuni comportamenti predefiniti del browser e ottenere miglioramenti delle prestazioni, ma comporta la necessità di scrivere quantità di JavaScript non banali che devono essere incorporate nella pagina o richieste da un file esterno, causando una latenza HTTP aggiuntiva.
Per contribuire a risolvere questa situazione, il gruppo di lavoro CSS ha proposto un nuovo descrittore @font-face, font-display, e una proprietà corrispondente per controllare in che modo un carattere scaricabile viene visualizzato prima che venga caricato completamente.
Cronologia del download dei caratteri
Analogamente ai comportamenti esistenti di timeout dei caratteri che alcuni browser implementano oggi, font-display segmenta la durata del download di un font in tre periodi principali.
- Il primo punto è il periodo di blocco dei caratteri. Durante questo periodo, se il volto carattere non viene caricato, qualsiasi elemento che tenta di utilizzarlo deve invece essere visualizzato con un volto di fallback invisibile. Se il tipo di carattere viene caricato correttamente durante il periodo di blocco, questo viene utilizzato normalmente.
- Il periodo di scambio dei caratteri si verifica immediatamente dopo il periodo di blocco dei caratteri. Durante questo periodo, se il tipo di carattere non viene caricato, ogni elemento che tenta di utilizzarlo deve invece essere visualizzato con un carattere di riserva. Se il tipo di carattere viene caricato durante il periodo di scambio, allora viene utilizzato normalmente.
- Il periodo di errore del carattere si verifica immediatamente dopo il periodo di scambio dei caratteri. Se il carattere non è stato ancora caricato all'inizio di questo periodo, viene contrassegnato come caricamento non riuscito causando il normale fallback del carattere. In caso contrario, il carattere viene usato normalmente.
Comprendere questi periodi significa che puoi usare font-display per decidere come visualizzare il carattere, a seconda che sia stato scaricato o meno.
Qual è il tipo di visualizzazione dei caratteri più adatto a te?
Per lavorare con il descrittore font-display, aggiungilo alle regole at-rule di @font-face:
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
Al momento font-display supporta il seguente intervallo di valori auto | block | swap | fallback | optional.
Automatica
auto utilizza la strategia di visualizzazione del carattere utilizzata dallo user agent. Al momento, la maggior parte dei browser ha una strategia predefinita simile a Blocca.
blocco
block assegna al carattere un breve periodo di blocco (3 secondi nella maggior parte dei casi) e un periodo di scambio infinito. In altre parole, il browser disegna all'inizio testo "invisibile" se il carattere non viene caricato, ma scambia il volto non appena viene caricato. A tale scopo, il browser crea un carattere anonimo con metriche simili a quelle del carattere selezionato, ma con tutti i glifi privi di "inchiostro". Questo valore deve essere usato solo se è necessario eseguire il rendering del testo in un determinato carattere tipografico affinché la pagina sia utilizzabile.
inverti
swap assegna al carattere un periodo di blocco di zero secondi e un periodo di scambio infinito. Ciò significa che il browser disegna il testo immediatamente con un elemento di riserva se il carattere non viene caricato, ma lo scambia non appena viene caricato. Come per block, questo valore dovrebbe essere usato solo quando il rendering del testo in un determinato carattere è importante per la pagina, ma il rendering in qualsiasi carattere comporta comunque un messaggio corretto. Il testo del logo è ideale per lo swap, dato che mostrare il nome di un'azienda con un testo di riserva ragionevole consente di far passare il messaggio, ma alla fine useresti il carattere tipografico ufficiale.
fallback
fallback offre al tipo di carattere un periodo di blocco estremamente ridotto (nella maggior parte dei casi è consigliato un periodo di blocco massimo di 100 ms) e un breve periodo di scambio (nella maggior parte dei casi sono consigliati tre secondi). In altre parole, il carattere viene visualizzato inizialmente con un elemento di riserva se non viene caricato, ma il carattere viene scambiato non appena viene caricato. Tuttavia, se passa troppo tempo, il video di riserva verrà utilizzato per il resto della vita della pagina. Il parametro fallback è ideale per elementi come il corpo del testo per cui vorresti che l'utente inizi a leggere il prima possibile e non vuoi disturbare la sua esperienza spostando il testo man mano che viene caricato un nuovo carattere.
facoltativo
facoltativo assegna al tipo di carattere un periodo di blocco molto ridotto (nella maggior parte dei casi è consigliato un periodo di blocco di 100 ms o meno) e un periodo di scambio di zero secondi. Come nel caso dei fallback, si tratta di una buona scelta quando il carattere scaricato è più semplice da avere, ma non è essenziale per l'esperienza. Il valore facoltativo lascia che sia il browser a decidere se avviare il download del carattere, cosa che può scegliere di non eseguire o che può farlo con bassa priorità a seconda di ciò che ritiene sia la soluzione migliore per l'utente. Ciò può essere utile in situazioni in cui l'utente ha una connessione debole e trascinare verso il basso un carattere potrebbe non essere il miglior utilizzo delle risorse.
Supporto del browser
font-display è attualmente soggetto al flag Funzionalità web sperimentali
in Chrome 49 per computer desktop e sarà disponibile in Opera e Opera per Android.
Demo
Dai un'occhiata all'esempio per provare
font-display. Per gli sviluppatori attenti alle prestazioni,
può essere un altro strumento utile nella barra degli strumenti.