La font-displayproprietà definisce il modo in cui i file dei caratteri vengono caricati e visualizzati dal browser. Viene applicato alla @font-faceregola che definisce i caratteri personalizzati in un foglio di stile.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Valori
La font-displayproprietà accetta cinque valori:
auto(predefinito): consente al browser di utilizzare il metodo predefinito per il caricamento, che è molto spesso simile alblockvalore.block: Indica al browser di nascondere brevemente il testo fino a quando il carattere non è stato scaricato completamente. Più precisamente, il browser disegna il testo con un segnaposto invisibile, quindi lo scambia con il carattere personalizzato non appena viene caricato. Questo è anche noto come "lampo di testo invisibile" o FOIT.swap: Indica al browser di utilizzare il carattere di riserva per visualizzare il testo fino al completo download del carattere personalizzato. Questo è anche noto come "flash of unstyled text" o FOUT.fallback: Agisce come un compromesso tra i valoriautoeswap. Il browser nasconderà il testo per circa 100 ms e, se il carattere non è stato ancora scaricato, utilizzerà il testo di riserva. Passerà al nuovo carattere dopo che è stato scaricato, ma solo durante un breve periodo di scambio (probabilmente 3 secondi).optional: Ad esempiofallback, questo valore indica al browser di nascondere inizialmente il testo, quindi passare a un carattere di riserva finché il carattere personalizzato non è disponibile per l'uso. Tuttavia, questo valore consente anche al browser di determinare se il carattere personalizzato viene persino utilizzato, utilizzando la velocità di connessione dell'utente come fattore determinante in cui le connessioni più lente hanno meno probabilità di ricevere il carattere personalizzato.
Ecco un altro modo per pensarci
| Periodo di blocco | Periodo di swap | |
|---|---|---|
| bloccare | Corto | Infinito |
| scambiare | Nessuna | Infinito |
| ricaderci | Estremamente corto | Corto |
| opzionale | Estremamente corto | Nessuna |
Perché ne abbiamo bisogno font-display
Prima di avere un ampio supporto per @font-face, il nostro arsenale tipografico era limitato ai caratteri locali, dove gli unici caratteri disponibili erano quelli precaricati sul computer dell'utente finale. Chiamiamo questi caratteri "sicuri per il web" perché il browser non ha bisogno di scaricare nulla per renderli.
Poi è arrivata la @font-faceregola che ha dato ai web designer e agli sviluppatori front-end nuovi poteri tipografici come mai prima d'ora. Ci ha permesso di caricare file di font su un server e scrivere una serie di regole nei nostri fogli di stile che nominano il font e dicono al browser dove scaricare i file. Ha anche dato origine a servizi come Google Fonts che hanno portato i caratteri personalizzati alle masse. Finalmente, un grosso ostacolo che separava il web design dal design di stampa era stato abbattuto!
Tuttavia, i caratteri personalizzati venivano (e continuano a venire) a un costo. I file dei caratteri possono essere di grandi dimensioni e il tempo aggiuntivo per scaricare i file può rallentare le prestazioni di un sito, in particolare per i dispositivi su una connessione di rete più lenta. Anche il costo aggiuntivo per gli utenti con piani dati limitati è diventato un fattore.
Un'altra preoccupazione particolare che è emersa con i caratteri personalizzati è ciò che è stato soprannominato un "lampo di testo senza stile" o, in breve, FOUT. Per impostazione predefinita, i browser mostrano un carattere di sistema in attesa del download del carattere personalizzato. Ciò ha permesso alle pagine web di caricarsi più velocemente, ma ha sollevato preoccupazioni tra i web designer che lo consideravano come un dirottamento dell'esperienza utente e una falsa rappresentazione del design previsto. I browser web oggi generalmente nascondono il testo fino a quando non viene scaricato il carattere personalizzato, che ora chiamiamo "lampo di testo invisibile" o FOIT.
Né FOUT né FOIT sono fantastici. Abbiamo modi per ottimizzare le prestazioni dei caratteri personalizzati per facilitare gli effetti. Tuttavia, ora dobbiamo font-displaydire al browser se preferiamo FOUT, FOIT o anche qualcosa di intermedio.
Test per il supporto
Avvertimento interessante notato da Šime Vidas:
CSS font-display è un
@font-facedescrittore e non una proprietà, quindi il suo supporto nel browser non può essere testato con query di funzionalità (@supportsregola CSS e API CSS.supports).
Maggiori informazioni
- Modulo di controllo del rendering dei caratteri CSS Specifica di livello 1: una bozza della specifica per la proprietà.
font-displayper le masse: Jeremy Wagner ci ha presentato la proprietà qui su CSS-Tricks.- Utilizzo
@font-face: una spiegazione completa della regola e delle migliori pratiche su come utilizzarla. - Stack di caratteri di sistema: uno snippet per rinunciare del tutto ai caratteri personalizzati e fare affidamento esclusivamente sui caratteri di sistema di un utente.
- Controllo delle prestazioni dei caratteri con
font-display: un bell'articolo sull'argomento da parte di Google.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 60 | 58 | No | 79 | 11.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |