Chrome DevTools peut désormais vous indiquer exactement la police utilisée pour afficher le texte.
Les piles de polices sont une chose étrange, plus une suggestion qu'une exigence. Étant donné que la famille que vous suggérez n'est pas forcément présente, vous laissez le navigateur de chaque utilisateur gérer le cas de non-traitement, en extrayant un élément qui fonctionnera et en l'utilisant.
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
En tant que développeur, vous souhaitez savoir quelle police est effectivement utilisée. Le principe est le suivant :
Sous Styles calculés, vous trouverez désormais un résumé des polices utilisées pour cet élément. Voici quelques points à noter:
- DevTools indique la police de caractères réelle utilisée par la couche de rendu du texte de Chrome. Vous n'avez plus à deviner à quelle police
serif
ousans-serif
correspond réellement. - Ma police Web fonctionne-t-elle ? Il est parfois difficile de savoir si vous voyez la police Web ou la police système de remplacement. Vous pouvez maintenant vérifier que la police Web est appliquée. Dans l'exemple ci-dessus, nous extrayons Lobster en tant que police Web pour le style
::first-line
. - Les polices de remplacement dans votre pile sont faciles à repérer. Dans l'exemple ci-dessus, il y avait une faute de frappe dans l'orthographe de Merriweather. Elle n'a donc pas été utilisée et est passée à Lobster.
- C'est Arial ou Helvetica ? Demandez à un concepteur ou… aux outils de développement. ;)
- Fonctionne parfaitement avec les polices Web Google, Typekit, les polices locales, les polices @font-face, les glyphes Unicode et toutes les autres sources de polices intéressantes.
Nous espérons que vous apprécierez cette fonctionnalité. N'hésitez pas à nous faire part de vos commentaires.