Les outils pour les développeurs Chrome peuvent désormais vous indiquer exactement quelle police de caractères est utilisée pour le rendu du texte.
Les piles de polices sont une chose amusante, plus une suggestion qu’une demande. Comme la famille que vous suggérez n'est peut-être pas présente, vous laissez le navigateur de chaque utilisateur gérer la demande de remplacement, en récupérant un élément qui fonctionne 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 réellement utilisée. Le principe est le suivant :
Sous Styles calculés, un récapitulatif des polices de caractères utilisées pour cet élément s'affiche. Voici quelques points à noter:
- Les outils de développement génèrent des rapports sur la police de caractères réelle utilisée par la couche de rendu de texte de Chrome. Plus besoin de deviner quelle police
serifousans-serifutilise pour la résolution. - Ma police Web fonctionne-t-elle ? Parfois, il est difficile de savoir si vous voyez la police Web ou la police du système de remplacement. Vous pouvez maintenant vérifier que la police Web est appliquée. Dans l'exemple ci-dessus, Lobster est sélectionné en tant que police Web pour le style
::first-line. - Les polices qui tombent dans la pile sont faciles à repérer. Ci-dessus, nous avions une faute de frappe en orthographe Merriweather et il n'a donc pas été utilisé, ce qui nous amène à "Lobster".
- S'agit-il d'Arial ou d'Helvetica ? Demandez à un concepteur ou... demandez aux outils de développement. ;)
- Fonctionne parfaitement avec les polices Web Google, Typekit, les polices locales, les polices de caractères @font-face, les glyphes Unicode et toutes les autres sources de polices intéressantes.
Profitez bien et n'hésitez pas à laisser un commentaire si vous avez des commentaires.