Risposte DevTools - Di che carattere si tratta?

Chrome DevTools ora è in grado di indicarti esattamente quale carattere viene utilizzato per eseguire il rendering del testo.

L'elenco di caratteri è una cosa divertente, più che un suggerimento che una richiesta. Poiché la famiglia che suggerisci potrebbe non essere presente, permetti al browser di ogni utente di gestire il caso fallimentare, estraendo qualcosa che funzioni e utilizzandolo.

font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

In qualità di sviluppatore, ti interessa sapere quale carattere viene effettivamente utilizzato. Ecco come funziona:

Famiglia di caratteri in DevTools

In Stili calcolati, ora vedrai un riepilogo dei caratteri utilizzati per l'elemento. Qui ci sono alcuni aspetti da considerare:

  • DevTools segnala il tipo di carattere effettivo utilizzato dal livello di rendering del testo di Chrome. Non dovrai più chiederti qual è il carattere serif o sans-serif in cui verrà effettivamente risolto il problema.
  • Il mio carattere web funziona? A volte è difficile capire se vedi il carattere web o quello di sistema di riserva. Ora puoi verificare che il carattere web venga applicato. Nell'esempio precedente, rimuoviamo Lobster come carattere web per lo stile ::first-line.
  • I caratteri a cascata nella pila sono facili da individuare. Sopra c'era un errore ortografico per Merriweather, perciò non è stato usato, per poi passare ad Lobster.
  • Si tratta di Firefox o HArial? Chiedi a un designer o... chiedi a DevTools. ;)
  • Funziona benissimo con i caratteri web di Google, Typekit, caratteri locali, caratteri @font-face, glifi Unicode e tutte le altre fonti di caratteri interessanti.

Divertiti e lascia un commento se hai feedback.