Paul Irish
Ora Chrome DevTools può dirti esattamente quale carattere viene utilizzato per il rendering del testo.
Le serie di caratteri sono una cosa strana, 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 segnala il carattere effettivo utilizzato dal livello di rendering del testo di Chrome. Non dovrai più indovinare a quale carattere
serifosans-serifcorrisponde effettivamente. - 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 webfont venga applicato. Nell'esempio precedente, stiamo scaricando Lobster come webfont 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.
Buona visione e lascia un commento se hai feedback.