Controllo del rendimento dei caratteri con font-display

Rob Dodson

Il comportamento di un carattere web durante il caricamento può essere un'importante tecnica 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. in base al tempo necessario per caricarle.

Differenze nel rendering dei caratteri oggi

I caratteri web offrono agli sviluppatori la possibilità di incorporare elementi di tipografia i propri progetti con il compromesso che se l'utente non possiede già è necessario che il browser dedichi un po' di tempo a scaricarlo. Dato che le reti possono screpolatura, il tempo di download potrebbe influire negativamente sulla un'esperienza senza intervento manuale. Dopotutto, a nessuno importa quanto sia bello il tuo testo richiede una quantità di tempo eccessiva per essere visualizzati.

Per ridurre il rischio di un download lento dei caratteri, la maggior parte dei browser implementa una timeout dopo il quale verrà utilizzato un carattere di riserva. Questa è una tecnica utile ma sfortunatamente i browser differiscono nell'implementazione effettiva.

• Chrome e Firefox hanno un timeout di tre secondi, dopodiché il testo viene visualizzato con il carattere di riserva. Se il font viene scaricato, alla fine uno scambio e il testo viene visualizzato nuovamente con il carattere previsto.
• Internet Explorer ha un timeout di zero secondi che produce testo immediato per il rendering delle immagini. Se il carattere richiesto non è ancora disponibile, viene utilizzato un carattere di riserva. 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 una rete di riferimento timeout).

A peggiorare le cose, gli sviluppatori hanno un controllo limitato nel decidere in che modo ne influenzeranno l'applicazione. Uno sviluppatore che mira al rendimento potrebbe preferire offrire un'esperienza iniziale più rapida utilizzando un carattere di riserva e sfruttare solo il carattere web più gradevole nelle visite successive dopo che è stato possibile scaricarlo. Utilizzando strumenti come l'API Font Upload, potrebbe essere possibile eseguire l'override di i comportamenti predefiniti del browser e ottenere miglioramenti in termini di prestazioni, ma si tratta di un aspetto della necessità di scrivere quantità di JavaScript non banali che dovranno poi integrate nella pagina o richieste da un file esterno, comportando latenza HTTP.

Per contribuire a risolvere questa situazione, il gruppo di lavoro di CSS ha proposto un nuovo descrittore @font-face, font-display e una proprietà corrispondente per controllare come viene visualizzato un carattere scaricabile prima che venga caricato completamente.

Cronologia del download dei caratteri

Simile ai comportamenti esistenti di timeout dei caratteri implementati da alcuni browser oggi, font-display segmenta la durata del download di un font in tre principali cicli.

1. Il primo punto è il periodo di blocco dei caratteri. Durante questo periodo, se Il tipo di carattere non è stato caricato; qualsiasi elemento che tenta di utilizzarlo deve invece essere visualizzato con un carattere di riserva invisibile. Se il tipo di carattere viene caricato correttamente durante durante il periodo di blocco, il tipo di carattere viene usato normalmente.
2. 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 tenta di utilizzarlo devono invece essere visualizzati con un carattere di riserva. Se il tipo di carattere funziona correttamente durante il periodo di scambio, il tipo di carattere viene quindi utilizzato normalmente.
3. Il periodo di errore del carattere si verifica immediatamente dopo il periodo di scambio dei caratteri. Se il tipo di carattere non è stato ancora caricato all'inizio di questo periodo, viene contrassegnato come caricamento non riuscito, causando il normale fallback dei caratteri. Altrimenti, il carattere è usato normalmente.

Comprendere questi cicli significa che puoi usare font-display per decidere come deve essere visualizzato 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. La maggior parte dei browser hanno al momento una strategia predefinita simile a blocca.

blocco

block assegna al tipo di carattere un breve periodo di blocco (3 secondi sono consigliati nella maggior parte dei casi) e un periodo di scambio infinito. In altre parole, il browser disegna "invisibile" testo se il carattere non viene caricato, ma inverti il volto non appena viene viene caricato automaticamente. A tale scopo, il browser crea un carattere anonimo con le metriche simile al carattere selezionato, ma con tutti i glifi senza "inchiostro". Questo valore deve essere usato solo se si esegue il rendering del testo in un determinato carattere tipografico necessaria 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 tipo di carattere non viene caricato, ma scambia il volto carattere appena viene caricato. Analogamente a block, questo valore deve essere usato solo quando si esegue il rendering del testo in un determinato carattere importante per la pagina, ma il rendering con qualsiasi carattere presenta comunque messaggio. Il testo del logo è adatto per lo scambio, in quanto mostra una nome dell'azienda utilizzando un fallback ragionevole trarrà il messaggio, ma dovresti e alla fine usare il carattere tipografico ufficiale.

fallback

fallback offre al tipo di carattere un periodo di blocco estremamente ridotto (massimo 100 ms consigliato nella maggior parte dei casi) e un breve periodo di scambio (sono consigliati tre secondi) nella maggior parte dei casi). In altre parole, il carattere del carattere viene visualizzato con un elemento di riserva in se non viene caricato, ma il carattere viene scambiato non appena viene caricato. Tuttavia, se passa troppo tempo, la creatività di riserva verrà utilizzata intera durata. fallback è un buon candidato per elementi come il corpo del testo in cui, ad esempio che l'utente inizi a leggere appena possibile e non voglia disturbare la loro esperienza spostando il testo quando viene caricato un nuovo carattere.

facoltativo

facoltativo assegna al tipo di carattere un periodo di blocco molto ridotto (massimo 100 ms consigliato nella maggior parte dei casi) e un periodo di scambio di zero secondi. Analogamente alla procedura di riserva, Si tratta di una buona scelta per i tipi di carattere che "scaricano" ma non è fondamentale per l'esperienza. Il valore facoltativo lascia l'impostazione browser per decidere se avviare il download del carattere, cosa che potrebbe scegliere di non da fare o potrebbe farlo con bassa priorità a seconda di ciò che ritiene la migliore soluzione per l'utente. Ciò può essere utile nelle situazioni in cui l'utente si trova su un connessione debole e rimuovere un carattere potrebbero non rappresentare un buon utilizzo delle risorse.

Supporto browser

Al momento font-display è soggetto al flag Funzionalità web sperimentali della piattaforma su Chrome 49 per computer desktop e sarà presto disponibile in Opera e Opera per Android.

Demo

Dai un'occhiata all'esempio per font-display un colpo. Per gli sviluppatori che vogliono migliorare le prestazioni, potrebbe essere un altro nella barra degli strumenti.