In questi giorni prendiamo i font web per scontati. Non abbiamo sempre avuto la possibilità di impostare il nostro testo in quasi tutti i tipi di carattere. Voglio dire, potremmo, ma poi dovremmo sospirare e dire: "Beh, sarà bello sui computer di cinque persone. Spero che a tutti gli altri piaccia Verdana! "
I caratteri Web portarono una certa varietà necessaria alla vista, alcuni abusi di tipografia, un peso in più della pagina man mano che i caratteri stessi venivano caricati e lampi di testo non programmato o invisibile. Bene ... frittata, uova, rottura, hai capito. Doveva succedere.
Se gli utenti rimangono bloccati a guardare una pagina vuota troppo a lungo, potrebbero decidere di andarsene
È un po 'un problema di usabilità, però, quando il testo è invisibile finché non viene caricato il carattere personalizzato. Se gli utenti sono bloccati a guardare una pagina vuota troppo a lungo (e troppo a lungo potrebbero essere millisecondi) potrebbero decidere di andarsene. E questo è abbastanza giusto. Non è facile da usare.
Avanziamo rapidamente di alcuni anni e stiamo facendo progressi sul controllo del caricamento dei caratteri. Fino ad ora, l'abbiamo fatto con librerie e API di terze parti. Ma ora, finalmente, questa funzionalità sta arrivando ai CSS.
Immettere la proprietà di visualizzazione font . Attualmente è solo in Opera, Opera per Android e Chrome. (È stato introdotto per la prima volta in Chrome 49 come funzione sperimentale.)
Viene fornito con quattro opzioni: auto , scambio , fallback e opzionale .
Fondamentalmente, scegliendo font-display: auto lascerà il browser per agire come fa ora. Il testo sarà invisibile finché non verrà caricato il carattere personalizzato.
lo swap è probabilmente ciò che la maggior parte delle persone userà. Se il carattere non viene caricato, verrà utilizzato il successivo carattere disponibile definito nella proprietà della famiglia di caratteri . Quando il carattere web viene caricato, verrà sostituito. Questo è fondamentalmente un lampo di contenuto non disegnato, ma è più user-friendly del contenuto invisibile, penso.
il fallback divide la differenza tra quelle prime due opzioni. Per un ritardo di 100 millisecondi, il testo sarà invisibile. Se il carattere personalizzato viene caricato da allora, verrà utilizzato. In caso contrario, il carattere successivo nella riga di successione verrà applicato fino a quando non verrà caricato il carattere personalizzato.
Opzionale funziona come fallback, tranne che il browser può decidere di non caricare affatto il carattere personalizzato, se la connessione dell'utente è troppo lenta
Opzionale funziona come fallback, tranne che il browser può decidere di non caricare affatto il carattere personalizzato, se la connessione dell'utente è troppo lenta.
E lì ce l'abbiamo. declaration. Intendiamoci, il carattere del display è pensato per essere usato in una dichiarazione @ font-face . Ciò significa che per ora non funzionerà con provider di font di terze parti come Typekit o Google Fonts. Una volta che il font-display diventa più diffuso, tuttavia, è probabile che implementeranno una sorta di opzione per questa funzione.