Comment puis-je déterminer quelle police un navigateur utilise réellement pour rendre du texte?

175

Mon CSS spécifie " font-family: Helvetica, Arial, sans-serif;" pour toute la page. Il semble que Verdana soit utilisé à la place sur certaines pièces. J'aimerais pouvoir le vérifier.

J'ai essayé de copier et coller de mon navigateur dans Word, mais cela ne préserve pas la police.

Existe-t-il un moyen de déterminer quelle police est réellement utilisée pour une section de texte?

Firebug me donnera la liste des polices comme ci-dessus [1], mais je ne vois pas de moyen de déterminer laquelle des polices est utilisée.

  1. Il s'avère que la mauvaise liste était utilisée, ce qui a résolu mon problème Verdana initial. Mais je suis toujours curieux de savoir s'il existe un moyen d'identifier la police de rendu réelle.
lavaturtle
la source
FontFinder et WhatFont décrits dans les réponses ci-dessous sont encore des moyens très rudimentaires de détecter la police utilisée. Les deux ont indiqué par erreur "Quanttrocentro Sans" (la police principale) lorsque je sélectionne un ؋symbole Aghani qui n'est pas disponible dans cette police.
Question Overflow
@QuestionOverflow, de nos jours, Firefox et Chrome ont des outils intégrés pour déterminer la police. Ils vont montrer la police pour chaque glyphe, donc vous montrer ce que la police a été utilisé pour cette ؋ aussi bien.
Arjan
@Arjan: est-ce toujours le cas en 2020?
dévoré l'elysium
@devouredelysium, avez-vous vu ma réponse ? Sélectionnez simplement un seul glyphe pour voir quelle police est utilisée.
Arjan

Réponses:

50

Selon la réponse de Wilfred Hughes , Firefox prend désormais en charge cela de manière native. Cet article contient plus de détails .

Cette réponse originale faisait référence au plugin "Font Finder", mais uniquement parce que c'était il y a 4 ans. Le fait que les anciennes réponses persistent comme ça et que la communauté ne puisse pas les mettre à jour est l'un des rares échecs restants de Stack Overflow.

Jeremy Kauffman
la source
7
Aucune raison d'utiliser ceci maintenant que Firefox's Tools> Web Developer> Inspector> Fonts vous le dit (réponse de Wilfred Hughes)
skierpage
1
Malheureusement, Firefox 47 n'a plus l'onglet Polices référencé dans ce blog auquel vous avez lié: Cet article a plus de détails
Zabba
3
«À partir de Firefox 47, la vue Polices est désactivée par défaut. Nous travaillons sur un remplacement plus complet. Pour le moment, si vous voulez voir la vue Polices, visitez about: config, recherchez la préférence devtools. fontinspector.enabled et définissez-le sur true. " Voir developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… .
Daniel Le
1
Apparemment, le paramètre devtools.fontinspector.enabledn'était nécessaire que dans Firefox 47: "Dans Firefox 47 uniquement , la vue Polices est désactivée par défaut. Si vous voulez voir la vue Polices dans Firefox 47, visitez le site about:config, recherchez la préférence devtools.fontinspector.enabledet définissez-la sur true. Avant et après Firefox 47, la vue Polices est activée par défaut. " , @DanielLe.
Arjan
1
@DanielLe, bien sûr j'ai compris que c'était correct au moment où vous avez copié le texte :-)
Arjan
151

De nos jours, Chrome et Firefox ont des outils intégrés pour cela, mais Safari a besoin de vous pour copier du texte et étudier cela.

Tout d'abord, sélectionnez du texte. Dans Firefox, l'inspecteur de page a une vue Polices :

Affichage des polices Firefox

Cela vous dira également si les polices ont été téléchargées et quel style est utilisé, comme Regular, ExtraLight, Italic, BoldItalic et tout.

Pour Chrome, allez dans "Elements" de DevTools, allez dans son onglet "Computed", et faites défiler jusqu'à la section appelée "Rendered Fonts". Contrairement à Firefox, cela n'affiche que le nom de la police de base, pas un style spécifique qu'elle pourrait utiliser:

Inspecteur Web Chrome

Les captures d'écran ci-dessus montrent que plusieurs polices peuvent être affichées pour le texte Unicode. Chrome vous indique que 6 glyphes («Pekka» et l'espace) utilisent «Arial», et un («웃») utilise «Apple SD Gothic Neo»:

Arial - Fichier local (6 glyphes)
Apple SD Gothic Neo - Fichier local (1 glyphe)

Le CSS actuel définit:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

Mais ces polices n'incluent souvent pas de nombreux caractères spéciaux. Comme les informations sur la police fonctionnent par élément HTML, où le texte Unicode dans un élément peut en fait utiliser plusieurs polices, elles affichent également plusieurs polices. En cas de doute, double-cliquez simplement sur le texte dans le volet HTML et supprimez le texte qui ne vous intéresse pas. Ensuite, lorsque vous sélectionnez à nouveau l'élément environnant, vous ne verrez qu'une seule option. Dans ce cas, cela vous dirait que les deux navigateurs ont utilisé "Apple SD Gothic Neo Regular" pour le caractère "웃".

Malheureusement, différents navigateurs (et même différentes versions d'un même navigateur) sur la même machine peuvent utiliser des polices différentes, en raison des types de polices pris en charge / préférés par un navigateur. Sur un Mac, par exemple, Safari peut préférer la technologie avancée Apple tandis que Firefox prend en charge Microsoft OpenType (ce qui peut poser des problèmes pour l'arabe après l'installation de Microsoft Office sur un Mac). Ou pour le caractère "웃" dans les captures d'écran ci-dessus, Chrome et Firefox sur mon Mac préfèrent de nos jours "Apple SD Gothic Neo" (qui est OpenType PostScript) mais les anciennes versions de Firefox utilisaient "AppleGothic Regular" à la place (qui est une police TrueType) .

Pour les navigateurs qui n'ont pas une vue de polices similaire, copiez et collez simplement un fragment du texte dans un traitement de texte ou un éditeur de texte enrichi, sélectionnez un texte spécifique et voyez quel nom apparaît dans une liste déroulante de polices. Sur mon Mac, cela ne fonctionne pas lors du collage à partir de Firefox (où pour «Firefox» «Apple SD Gothic Neo» de Firefox est converti en «AppleMyungjo» lors du collage), mais fonctionne bien pour Safari et Chrome:

Texte collé du navigateur dans l'éditeur de texte enrichi

Arjan
la source
1
Savez-vous si Safari a un plugin ou quelque chose pour ça?
Andry
4
Dans Chrome 47, assurez-vous de faire défiler vers le bas de la section Calculé. Le développement de l' font-familyattribut tel qu'il apparaît (par ordre alphabétique) n'affichera pas la police en cours de chargement. Cette information apparaît en bas.
Merchako
1
@Merchako, Que se passe-t-il lorsque votre police calculée est une police générique comme "serif" et "sans-serif"? Alors, comment obtenez-vous la police réelle ?
Pacerier
2
@Pacerier, dans Chrome, faites simplement défiler vers le bas dans l'onglet Calculé; dans Firefox, voir l'onglet séparé.
Arjan
1
@TMG, je pourrais imaginer que les polices Web n'ont peut-être pas besoin d'un alias, mais peuvent se référer directement à une URL. S'agit-il d'un site Web public que nous pouvons consulter? Sinon, que montre Firefox?
Arjan le
30

WhatFont est une extension Chrome qui vous indiquera spécifiquement quelle police de la pile de polices est chargée.

user1100745
la source
6
Pour moi, il indique quelle police est déclarée, mais pas quelle police est réellement utilisée.
panzi
3
Selon cet article ( updates.html5rocks.com/2013/09/… ), Dev Tools peut maintenant vous dire quelle est la police réelle rendue.
yorch
WhatFont tente de détecter la police rendue mais semble ne pas le faire avec succès github.com/chengyin/WhatFont-Bookmarklet/issues/13
Chris Marisic
7

Pour les versions actuelles de Firefox (depuis la v7), il existe un module complémentaire appelé "fontinfo" qui signalera la police réelle utilisée (plutôt que ce que dit la propriété CSS font-family), en tenant compte des cas où le navigateur revient à une police différente car la famille de polices demandée n'était pas disponible ou ne prenait pas en charge les caractères utilisés dans le texte.

Jonathan
la source
À présent, c'est la meilleure réponse
Ingo Kegel
1

Vous pouvez essayer de vérifier cette section spécifique avec Firebug pour Firefox. Il devrait vous donner toutes les propriétés exactes.

jeroen
la source
Cela me donne toujours la liste, pas celle spécifique qu'il utilise ... Mais sur une deuxième vérification, Verdana est entré d'une manière ou d'une autre dans la liste des familles de polices, ce qui serait la cause de mon problème initial. Donc merci.
lavaturtle
1
Firebug vous indiquera également quelles règles se déclenchent pour donner à l'élément cette police - très utile pour déterminer où votre CSS va mal.
RichieHindle
Safari 4 Beta a aussi un WebInspector (pourrait être un firebug skinned)
vikingosegundo
1
Je pense que vous aurez toujours la liste complète, quel que soit l'outil que vous utilisez. La police utilisée est la première de la liste installée sur votre ordinateur.
jeroen
2
Firebug actuellement (1.11.4, peut-être aussi plus tôt) met en évidence la police actuelle en bleu.
Mark Vrabel
1

Le plugin "FontFinder" mentionné par jeremy semble ne pas fonctionner ici, donnant la première police de la liste CSS quelle que soit la police réellement rendue (Firefox 4.0rc1 sous Linux). Le plugin suivant vous donne cependant la police "correcte", semble-t-il.

Police de contexte

Dave Vogt
la source
Malheureusement, même la police de contexte ne montre que la famille CSS calculée, qui peut être serif ou sans-serif, par exemple. De plus, si un caractère n'est pas présent dans la police calculée et que le navigateur le récupère dans une police différente, la police contextuelle affiche toujours la famille de polices calculée, pas la police réelle.
Jukka K. Korpela
0

Basé sur l'approche de mesure de texte et le script de Lalit Patel, j'ai créé des bookmarklets qui peuvent deviner la police qui est utilisée pour le texte actuellement sélectionné (ou le body, si rien n'est sélectionné). Cela semble très bien fonctionner pour moi pour déterminer quelle police dans une pile est utilisée! ( sans-serifCependant, il ne peut pas vous dire à quoi correspond réellement.)

Prenez-les ici: https://alanhogan.com/bookmarklets#font-stack-full

La source est sur GitHub .

Voir aussi: ce CodePen , qui utilise essentiellement le même code. Essayez-le en sélectionnant différents paragraphes et en regardant la mise à jour du tableau / des suppositions!

Alan H.
la source