1 votes

Comment identifier le fichier de police spécifique que mon navigateur a utilisé pour rendre un élément ?

Est-il possible d'identifier le fichier de police spécifique que mon navigateur a utilisé pour rendre le texte d'un élément ?

L'histoire est qu'une page web (à partir d'une extension Chrome) rend un élément en utilisant ce style (trouvé via dev tools)

{
    font-size: 22px;
    text-align: center;
    width: 100%;
    font-weight: 200;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

et avait l'air terrible dans le rendu fin et léger de l'Helvetica, car je n'avais pas installé l'Helvetica Neue. J'ai essayé de résoudre ce problème en installant une collection de plus de 50 fichiers de police, à la fois *.ttf et *.otf, qui mettent en œuvre différentes formes d'Helvetica Neue. L'un de ces fichiers a résolu le problème, mais d'autres ont donné un aspect horrible à d'autres pages.

J'essaie donc d'identifier le fichier de police spécifique qui corrige le cas unique avec lequel j'ai eu le problème initial afin de pouvoir supprimer les autres, mais avec autant de fichiers de police, c'est difficile. D'où ma question : existe-t-il un moyen d'identifier le fichier de police utilisé ? Je suis sous Windows 10 et 11, si cela a une incidence. Je peux simuler l'élément dans un simple fichier HTML en utilisant le même style et en l'affichant dans Chrome ou Edge, donc le fait que la page réelle provienne d'une extension Chrome n'est pas pertinent pour la question. Si je supprime tous les fichiers otf, le texte a une mauvaise apparence. C'est donc l'un d'entre eux qui corrige l'affichage, mais lequel ?

0voto

Daniel B Points 52129

Les outils pour développeurs de Google Chrome fournissent toutes les informations que vous souhaitez, jusqu'au glyphe !

Par exemple, prenons l'icône "maison" de Font Awesome. ici :

Font Awesome "house"

Si nous jetons un coup d'œil dans les outils du développeur de Chrome (que vous pouvez faire apparaître en utilisant F12 o Ctrl + Shift + I ou le menu hamburger Plus d'outils Outils de développement) à l'adresse <i> de l'élément ::before élément pseude (où Font Awesome police sont situés), nous verrons ce qui suit :

Chrome Developer Tools Computed style tab

Dans l'onglet de style "Calculé", nous pouvons voir quelles polices ont été utilisées pour rendre le texte de cet élément. Dans ce cas, un glyphe de "Font Aweseome 6 Pro Light" a été utilisé pour rendre l'icône de la maison.

Il y a un petit bémol : ces informations ne s'affichent que pour un élément qui contient directement du texte. Vous ne pouvez pas sélectionner un document entier et voir toutes les polices utilisées à l'intérieur. Vous devez sélectionner l'élément spécifique qui possède la police de caractères nœud de texte .

En utilisant cette information, vous pouvez même voir quelles polices ont été substitué en cas de glyphes manquants dans la police spécifiée.

SistemesEz.com

SystemesEZ est une communauté de sysadmins où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres sysadmins, poser vos propres questions ou résoudre celles des autres.

Powered by:

X