Il existe plusieurs façons d'accomplir cela. En fait, je le fais beaucoup, parce que je suis très intéressé par le fonctionnement de CSS, et aussi j'adore la typographie. Les deux façons que j'aime faire sont:
Comment interpréter le font-family
CSS:
La font-family
propriété déterminera quelles sont les polices. Dans cette propriété, les polices seront séparées par des virgules . Lors du rendu de la page, un navigateur parcourra cette liste et utilisera la première police qui s'y trouve sur l'ordinateur . Dans de nombreux cas, il existe également une catégorie de polices à la fin de cette propriété, qui est juste un "juste au cas où" afin que la police par défaut pour cette catégorie soit utilisée si aucune autre n'est disponible.
Un exemple: disons qu'il s'agit de quelques CSS pour une <p>
enceinte.
p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}
Ici, le navigateur essaiera d'abord d'utiliser Calibri, si la police est disponible. Sinon, il utilise Comic Sans MS, ou Georgia, ou tout simplement la police sans-serif par défaut si les autres ne sont pas disponibles.
C'est ainsi que vous pouvez savoir quelles polices sont utilisées. Je n'ai pas trouvé d'outils bien construits et utiles qui visualisent le CSS d'une manière très agréable, mais je pense que l'option Inspecteur fonctionnera pour vous (ce n'est pas trop déroutant!). Je pense que c'est la voie à suivre.
Exemple de recherche de polices NYTimes avec un outil Inspecteur:
Je vais vous expliquer comment trouver les polices du corps de texte principal d' un article NYTimes avec Google Chrome.
Accédez à un article sur NYTimes.com, cliquez avec le bouton droit sur un élément de texte pour lequel vous souhaitez trouver les polices et appuyez sur Inspecter l'élément .
Regardez la barre latérale à droite. Dans la liste déroulante Style calculé , vous verrez les propriétés CSS de cet élément. Cependant, comme vous pouvez le voir, il n'existe actuellement aucune propriété de famille de polices, ce qui signifie que les polices sont définies globalement, pas seulement pour cet élément spécifique. Cependant, il existe un moyen de contourner ce problème!
Voici ce que vous faites: Sélectionnez le bouton radio à côté de "Afficher hérité".
De nombreuses autres propriétés globales apparaîtront sous "Style calculé".
Faites défiler la liste jusqu'à "famille de polices". Il doit être en gris, ce qui signifie qu'il s'agit d'une propriété globale héritée. Ici, vous pouvez voir les polices utilisées! Ta-da!