Decidere il comportamento di un carattere web durante il caricamento può essere una tecnica di ottimizzazione delle prestazioni importante. Il nuovo descrittore font-display per @font-face consente agli sviluppatori di decidere in che modo visualizzare i caratteri web (o di riserva), a seconda del tempo necessario per il caricamento.
Differenze nel rendering dei caratteri oggi
I caratteri web consentono agli sviluppatori di incorporare rich media nei loro progetti con il compromesso che, se l'utente non possiede già un carattere, il browser deve dedicare un po' di tempo a scaricarlo. Poiché le reti possono essere instabili, il tempo di download potrebbe influire negativamente sull'esperienza dell'utente. Dopotutto, a nessuno interesserà la bellezza del tuo testo se il tempo impiegato è troppo lungo per essere visualizzato.
Per ridurre il rischio di un download lento dei caratteri, la maggior parte dei browser implementa un timeout, dopodiché verrà utilizzato un carattere di riserva. Questa è una tecnica utile, ma sfortunatamente i browser prevedono delle differenze 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 dopo il quale il testo viene visualizzato con il carattere di riserva. Se il carattere viene scaricato, viene eseguito uno scambio e il testo viene nuovamente visualizzato con il carattere previsto.
- Internet Explorer ha un timeout di zero secondi che determina l'immediata visualizzazione del testo. Se il carattere richiesto non è ancora disponibile, viene utilizzato un carattere di riserva e il testo viene sottoposto nuovamente a rendering in un secondo momento non appena il carattere richiesto diventa disponibile.
- Safari non ha alcun comportamento di timeout (o almeno nulla oltre un timeout di rete di riferimento).
Come se non bastasse, gli sviluppatori hanno un controllo limitato nel decidere in che modo queste regole influenzeranno la loro applicazione. Uno sviluppatore orientato alle prestazioni potrebbe preferire un'esperienza iniziale più veloce con un carattere di riserva e utilizzare solo il carattere web più bello nelle visite successive dopo aver avuto la possibilità di scaricare. Utilizzando strumenti come l'API di caricamento dei caratteri, è possibile eseguire l'override di alcuni dei comportamenti predefiniti del browser e ottenere miglioramenti delle prestazioni, ma comporta la necessità di scrivere quantità non banali di JavaScript che devono poi essere incorporati nella pagina o richieste da un file esterno, generando ulteriore latenza HTTP.
Per contribuire a risolvere questa situazione, il CSS Working Group ha proposto un nuovo descrittore @font-face, font-display, e una proprietà corrispondente per controllare in che modo viene visualizzato un carattere scaricabile prima che venga caricato completamente.
Sequenze temporali di download dei caratteri
Analogamente ai comportamenti di timeout dei caratteri esistenti che alcuni browser implementano oggi, font-display segmenta la durata del download di un carattere in tre periodi principali.
- Il primo periodo corrisponde al periodo di blocco dei caratteri. Durante questo periodo, se il tipo di carattere non viene caricato, qualsiasi elemento che tenti di utilizzarlo deve essere visualizzato con un tipo di carattere di riserva invisibile. Se il tipo di carattere viene caricato correttamente durante il periodo di blocco, il tipo di carattere 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, qualsiasi elemento che tenti di utilizzarlo deve invece essere visualizzato con un tipo di carattere di riserva. Se il tipo di carattere viene caricato correttamente durante il periodo di scambio, il tipo di carattere viene utilizzato normalmente.
- Il periodo di errore dei caratteri si verifica immediatamente dopo il periodo di scambio dei caratteri. Se il tipo di carattere non è ancora caricato all'inizio di questo periodo, viene contrassegnato come caricamento non riuscito, causando il normale utilizzo dei caratteri di riserva. In caso contrario, il carattere viene utilizzato normalmente.
Comprendere questi periodi significa che puoi usare font-display per decidere come deve essere visualizzato il tuo carattere a seconda di se o quando è stato scaricato.
Qual è il tipo di visualizzazione dei caratteri più adatto a te?
Per utilizzare il descrittore font-display, aggiungilo alle regole at-rule @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');
}
font-display supporta attualmente il seguente intervallo di valori auto | block | swap | fallback | optional.
Automatica
auto utilizza la strategia di visualizzazione dei caratteri 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 (nella maggior parte dei casi sono consigliati 3 secondi) e un periodo di scambio infinito. In altre parole, all'inizio il browser disegna testo "invisibile" se il carattere non è stato caricato, ma ne sostituisce il tipo subito dopo il caricamento. Per farlo, il browser crea un carattere anonimo con metriche simili al carattere selezionato, ma con tutti i glifi che non contengono "inchiostro". Questo valore deve essere utilizzato solo se è necessario visualizzare il testo con un determinato tipo di carattere 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 immediatamente il testo con un elemento di riserva se il tipo di carattere non viene caricato, ma lo sostituisce non appena viene caricato. Analogamente a block, questo valore dovrebbe essere utilizzato solo quando il rendering del testo in un determinato carattere è importante per la pagina, ma il rendering con qualsiasi carattere genererà comunque un messaggio corretto. Il testo del logo è un buon candidato per lo swap, poiché se mostri il nome di un'azienda con un ragionevole elemento di riserva il messaggio verrà trasmesso, ma alla fine dovresti utilizzare il carattere ufficiale.
fallback
di riserva assegna al carattere un periodo di blocco estremamente ridotto (nella maggior parte dei casi si consiglia un periodo di blocco pari o inferiore a 100 ms) e un periodo di scambio breve (nella maggior parte dei casi sono consigliati tre secondi). In altre parole, il tipo di carattere viene visualizzato con un elemento di riserva inizialmente se non viene caricato, ma il carattere viene scambiato subito dopo il caricamento. Tuttavia, se passa troppo tempo, il video di riserva verrà utilizzato per il resto della durata della pagina. Il fallback è un buon candidato per elementi come il corpo del testo, in cui vorresti che l'utente inizi a leggere il prima possibile e non voglia disturbare la sua esperienza spostando il testo quando viene caricato un nuovo carattere.
facoltativo
Facoltativo assegna al carattere un periodo di blocco estremamente ridotto (nella maggior parte dei casi si consiglia un massimo di 100 ms) e un periodo di scambio di zero secondi. Come il fallback, è un'ottima scelta nei casi in cui il carattere di download è più semplice da usare, ma non fondamentale per l'esperienza. Il valore optional lascia al browser la decisione di avviare il download del carattere, che potrebbe scegliere di non eseguire o potrebbe farlo con una priorità bassa a seconda di ciò che ritiene essere migliore per l'utente. Questo può essere utile in situazioni in cui l'utente ha una connessione debole e la rimozione di un carattere potrebbe non essere il modo migliore per utilizzare le risorse.
Supporto del browser
font-display è attualmente dietro il flag Funzionalità della piattaforma web sperimentale
in Chrome 49 per desktop e sarà disponibile in Opera e Opera per Android.
Demo
Guarda un esempio per provare
font-display. Per gli sviluppatori attenti alle prestazioni, questo strumento
può essere uno strumento in più nella barra degli strumenti.