Comment déterminer quelle police un navigateur utilise réellement pour restituer du texte?
Mon CSS spécifie "font-family: Helvetica, Arial, sans-serif; "pour la page entière. Il semblerait que Verdana soit utilisé à la place sur certaines parties. J'aimerais pouvoir le vérifier.
J'ai essayé de copier et coller de mon navigateur vers 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.
- Il s’avère que la mauvaise liste a été utilisée, ce qui a résolu mon problème initial avec Verdana. Mais je suis toujours curieux de savoir s'il existe un moyen d'identifier la police de rendu réelle.
Per réponse de Wilfred Hughes , Firefox le supporte maintenant de manière native. Cet article a 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 ainsi 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 d’enquêter sur cela.
Dans Firefox, l'inspecteur de page a un vue Polices :
Cela vous indiquera également si les polices ont été téléchargées.
Pour Chrome, allez dans "Elements" de DevTools, allez dans son onglet "Calculé" et faites défiler l'écran jusqu'à la section intitulée "Polices rendues":
Les captures d'écran ci-dessus montrent que plusieurs polices peuvent être affichées pour le texte Unicode. Chrome 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 souvent ces polices n'incluent pas beaucoup de caractères spéciaux. Lorsque les informations sur les polices fonctionnent par élément HTML, le texte Unicode d’un élément pouvant en réalité utiliser plusieurs polices, il affiche également plusieurs polices. En cas de doute, double-cliquez sur le texte dans le volet HTML et supprimez le texte qui ne vous intéresse pas. Ensuite, lorsque vous sélectionnerez à nouveau l'élément environnant, vous ne verrez qu'une option. Dans ce cas, cela vous indiquerait que les deux navigateurs utilisaient "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 le même ordinateur 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 pourrait préférer Apple avancée alors que Firefox prend en charge Microsoft OpenType (qui peut donner 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 maintenant "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 ne disposant pas d'une vue de polices similaire, il vous suffit de copier et coller un fragment de texte dans un processeur de traitement de texte ou un éditeur de texte enrichi, de sélectionner un texte spécifique et de voir 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ù "" de "Apple SD Gothic Neo" de Firefox est converti en "AppleMyungjo" lors du collage), mais fonctionne bien pour Safari et Chrome:
WhatFont est une extension Chrome qui vous indiquera spécifiquement quelle police de la pile de polices est en cours de chargement.
Firefox 22+ vous indiquera quelle police est actuellement utilisée , sans aucune extension.
Pour les versions actuelles de Firefox (depuis la v7), un add-on appelé "fontinfo" indique la police utilisée (plutôt que ce que dit la propriété CSS famille de polices), en tenant compte des cas où le navigateur revient à une police différente parce que la famille de polices demandée n'était pas disponible ou ne prenait pas en charge les caractères utilisés dans le texte.
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 sur Linux). Le plugin suivant vous donne cependant la police "correcte", semble-t-il.
Vous pouvez essayer de vérifier cette section spécifique avec Firebug pour Firefox. Il devrait vous donner toutes les propriétés exactes.
Sur la base de l'approche de mesure du texte et du script de Lalit Patel, j'ai créé bookmarklets qui peut deviner la police utilisée pour le texte actuellement sélectionné (ou le body, si rien est sélectionné). Il me semble que cela fonctionne très bien pour déterminer la police utilisée dans une pile! (Il ne peut pas vous dire quoi sans-serif correspond en fait à, cependant.)
Prenez-les ici: https://alanhogan.com/bookmarklets#font-stack-full
La source est sur GitHub .
Voir aussi: this CodePen , qui utilise principalement le même code. Essayez-le en sélectionnant différents paragraphes et en regardant la mise à jour de la table/devinez!