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-application, 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
serifousans-serifcorrespond 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 comme police Web pour le style
::first-line. - Les polices de fin de la pile sont faciles à repérer. La faute de frappe Merriweather ci-dessus n'a pas été utilisée. Nous sommes donc tombés sur Lobster.
- C'est Arial ou Helvetica ? Demandez à un concepteur ou... les 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.