Comment savoir quelle police est utilisée par Chrome?
Imaginez que j'ai le 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, y a-t-il un moyen de savoir quelle police est rendue?
Edit: Dave (dans les commentaires sur la question) a souligné une question similaire. Je parle spécifiquement de Chrome ici. Beaucoup de réponses dans l'autre question suggèrent des extensions qui sont acceptables, cependant; Existe-t-il un moyen natif de déterminer ces informations en utilisant uniquement les outils de développement?
Edit sept 2013: L’équipe de Google Chrome vient d’annoncer que l’inspection des familles de polices est désormais disponible dans les dernières versions de Chrome Canary } _ (le lien Twitter contient une image contenant plus d’informations). Cela devrait se répercuter sur dev> beta> dans les prochaines semaines - bonne nouvelle!
Dans Google Chrome, devtools, dans l'onglet "Eléments", sous "Calculés":
Je suis un peu en retard à 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 l'inspecteur Web Chrome, accédez à la pile de polices du volet CSS du panneau des éléments. Ensuite, en commençant par le haut de la pile, modifiez le nom de la police (j’ajoute des lettres aléatoires) tout en gardant un œil sur le texte en question. Lorsque vous changez celui en cours d'utilisation, le texte de la police de texte change au fur et à mesure qu'il passe au suivant dans la pile.
Je suppose que quelque chose de similaire est possible dans la plupart des outils de développement
Voila
Si vous ne voulez pas utiliser de plugin, un bookmarklet vous le dira (une fois activé, vous survolez le texte):
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 polices, 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 qu'un navigateur ne supporte pas @ font-face alors il chargera des polices de secours telles qu'Arial et Helvetica.