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

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.

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.

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 :

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:

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:

Firefox 22+ vous montrera quelle police est actuellement utilisée , sans aucune extension.

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

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.

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

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

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!