Comment savoir quelle police utilise Chrome?

Imaginez que j’ai le CSS suivant

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

En supposant que «Sans-existant Sans» n’est pas installé sur le système, Arial sera utilisé par le navigateur. En utilisant Chrome, existe-t-il un moyen de savoir quelle police est rendue?

Edit: Dave (dans les commentaires à la question) a signalé une question similaire. Je parle spécifiquement de Chrome ici. Bon nombre des réponses à l’autre question suggèrent des extensions qui conviennent, cependant; Existe-t-il un moyen natif de déterminer cette information à l’aide des outils de développement uniquement?

Edit Sept 2013: L’équipe Chrome vient d’annoncer que l’inspection par famille de fonts est désormais disponible dans les dernières versions de Chrome Canary (le lien Twitter contient une image avec plus d’informations). Cela devrait passer par dev> beta> stable au cours des prochaines semaines – bonne nouvelle!

Dans Google Chrome devtools dans l’onglet “Éléments”, sous “Calculé”:

Papier magique roses bonjour minou

Je suis un peu en retard pour la fête mais je viens de découvrir un moyen très simple de déboguer la police utilisée par votre navigateur.

Dans Chrome Web Inspector, accédez à la stack de fonts dans le volet CSS du panneau Elements. Ensuite, en commençant par le haut de la stack, changez le nom de la police (j’ajoute des lettres aléatoires) tout en gardant un œil sur le texte en question. Lorsque vous modifiez celui en cours d’utilisation, vous verrez la police de changement de texte comme elle revient au suivant dans la stack.

Je suppose que quelque chose de similaire est possible dans la plupart des outils de développement.

Voilá

Si vous ne voulez pas utiliser un plugin, il y a un bookmarklet qui vous le dira (une fois activé et que vous passez le curseur sur ce texte):

http://chengyinliu.com/whatfont.html

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

Je ne connais pas de moyen de détecter le rendu des fonts, donc je ne réponds pas techniquement à votre question. J’ai trouvé ceci: http://webdesignerwall.com/tutorials/css3-font-face-design-guide C’est un javascript appelé Modernizr qui garantit que si un navigateur ne supporte pas @ font-face, il chargera des fonts de secours telles que Arial et Helvetica.