Paul Irish
Ora Chrome DevTools può indicare esattamente quale carattere viene utilizzato per il rendering del testo.
I gruppi di caratteri sono un oggetto divertente, più un suggerimento che una richiesta. Poiché la famiglia che suggerisci potrebbe non essere presente, lasci che sia il browser di ogni utente a gestire il caso di passaggio forzato, estraendo qualcosa che funzioni e utilizzandolo.
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
In qualità di sviluppatore, vuoi sapere quale carattere viene effettivamente utilizzato. Ecco come funziona:
In Stili calcolati, ora vedrai un riepilogo dei caratteri utilizzati per l'elemento. Ecco alcuni aspetti da tenere presente:
- DevTools sta segnalando il carattere tipografico effettivo utilizzato dal livello di rendering del testo di Chrome. Non dovrai più indovinare quale carattere verrà risolto da
serifosans-serif. - Il mio webfont funziona? A volte è difficile capire se stai visualizzando il webfont o il carattere di sistema di riserva. Ora puoi verificare che il web font venga applicato. Nell'esempio precedente, stiamo estraendo Lobster come carattere web per lo stile
::first-line. - I caratteri di transizione nella pila sono facili da individuare. Sopra, abbiamo avuto un errore ortografico Merriweather, quindi non è stato utilizzato, passando a Lobster.
- È Arial o Helvetica? Chiedi a un designer o… chiedi a DevTools. ;)
- Funziona perfettamente con Google Webfonts, Typekit, caratteri locali, caratteri tipografici @font-face, glifi Unicode e tutte le altre origini dei caratteri interessanti.
Buon divertimento e, se hai feedback, lascia un commento.