Comment savoir quelle police est utilisée par Chrome?

Question

Imaginez, j'ai le code CSS suivant

font-family: 'Non-existant Sans', Arial, sans-serif;

En supposant que "Non-existant Sans' n'est pas installé sur le système, Arial sera utilisé par le navigateur. À l'aide de Chrome, est-il possible de trouver de police qui est en cours de rendu?

Edit: Dave (dans les commentaires à cette question) ont signalé une question similaire. Je suis venu demander à propos de Chrome ici. Beaucoup de réponses à la question suggèrent les extensions qui sont d'accord, cependant; c'est là un moyen natif de la détermination de cette information en utilisant les Outils de Dev seul?

Edit: Septembre 2013: Le Chrome, l'équipe vient d'annoncer que font-family inspection est maintenant disponible dans les dernières versions de google Chrome Canary (Twitter link contient une image avec plus d'info). Cela devrait descendre à travers dev > bêta > stable au cours de la prochaine quelques semaines – grande nouvelle!

Answer 1

Sur la version canarienne de Google Chrome, vous pouvez directement depuis devtools sans aucune extension:

La source

EDIT C'est maintenant dans l'onglet Calculé:

Answer 2

Je suis un peu en retard à la fête, mais je viens de découvrir un moyen très simple de débogage de la police de caractères de votre navigateur.

Dans le Chrome Web Inspecteur, allez à la police de la pile dans le CSS volet des Éléments du Panneau. Puis, en commençant par le haut de la pile, changer le nom de la police (j'ai ajouter des lettres au hasard) tout en gardant un oeil sur le texte en question. Lorsque vous modifiez l'un dans l'utilisation, vous verrez le texte, changer la police, il retombe à la prochaine dans la pile.

Je suppose que quelque chose de semblable est possible dans la plupart des outils de dev

Voilá

Answer 3

Si vous ne voulez pas utiliser de plugin, un bookmarklet vous le dira (une fois activé, vous survolez le texte):

http://chengyinliu.com/whatfont.html

Answer 4

Votre "Non-existant Sans' peut être rendu avec @font-face dans votre css. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Je ne sais pas de manière à détecter le rendu des polices, donc je n'ai pas techniquement répondre à votre question. J'ai trouvé ceci: http://webdesignerwall.com/tutorials/css3-font-face-design-guide c'est un javascript appelé Modernizr qui assure si un navigateur ne supporte pas @font-face, alors elle sera en charge de polices de secours, comme Arial et Helvetica.

Answer 5

LA police utilisée dans Chrome Devtools est IS font-family: Consolas, 'Lucida Console', monospace;