web-dev-qa-db-fra.com

Comment trouver la police exacte utilisée par le navigateur

J'ai utilisé la feuille de style CSS comme font-family:arial,helvicta,sans-serif. Lorsque je l'ai vérifié dans le navigateur, je ne sais pas quelle police il utilise dans la famille de polices. Je souhaite connaître la police exacte utilisée par le navigateur pour l'affichage. Dans ce cas, le navigateur utilise Arial ou Helvicta ou sans-serif pour le texte que j'ai affiché.

J'ai vérifié en mettant cela dans Wordpad mais cela prend ma police système par défaut.

cssfontsbrowsers
7
sreekanth

Vous voulez le complément Font Finder pour Firefox:

https://addons.mozilla.org/en-US/firefox/addon/4415/

Vous permet de cliquer sur du texte sur une page Web et de vous montrer les informations sur la police pour ce texte, y compris la police sélectionnée dans la famille.

Je l'utilise depuis des lustres et c'est très utile.

4
Steve Claridge

Voici un petit document HTML que j'ai écrit qui utilise jQuery pour générer un script de recherche de police à utiliser sur votre site:

<html>
<head>
<title>Font Guesser</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
/*
  If you encounter two fonts which have the same results
  try changing the fontTestString value
...
  NOTE: Ensure that there are no CSS directives which
  affect generic SPAN tags on your final site which are
  not also applied to this font guesser script generator
*/
var fontTestString = 'AABCCDEEFGGHIIJmmmmwwww';
function fontFamiliesTest( valString ) {
  $('#results').html( '&nbsp;' );
  $('#yourJavascript').html( '&nbsp;' );
  if ( ! valString ) {
    alert( 'Please enter a font-family declaration' );
    return false;
  } else {
    var fontFamilies = new Array();
    fontFamilies = valString.split(',');
    for ( var i = 0; i < fontFamilies.length; i++ ) {
      $('#results').append( '<h2>' + fontFamilies[i] + '</h2><span class="baseLine" style="font-family:' + fontFamilies[i] + ';">' + fontTestString + '</span>');
    }
    $('#yourJavascript').append('<h2>Your jQuery font test script:</h2><form><textarea id="jQ" style="width:100%;height:500px;"></textarea></form>');
    $('#jQ').append('&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;' );
    $('#jQ').append("\r\n" + '&lt;script type="text/javascript"&gt;' );
    $('#jQ').append("\r\n" + '  var usedFont = "";' );
    $('#jQ').append("\r\n" + '  $(document).ready( function() {');
    $('#jQ').append("\r\n" + '    $(\'body\').append(\'&lt;div id="testFontWrapper" style="position:absolute;bottom:0;height:1px;width:1px;"&gt;\');');
    $('#jQ').append("\r\n" + '    $(\'body\').append(\'&lt;span id="testFont" style="display:inline;font-size:100px;"&gt;' + fontTestString + '&lt;/span&gt;&lt;/div&gt;\');');
    $('.baseLine').each(function() {
      $('#jQ').append("\r\n" + '    if ( $(\'#testFont\').width() == ' + $(this).width() + ' ) usedFont = "' + $(this).css('font-family') + '";');
    });
    $('#jQ').append("\r\n" + '    alert(\'Used font appears to be:\' + usedFont );');
    $('#jQ').append("\r\n" + '  });');
    $('#jQ').append("\r\n" + '&lt;/script&gt;' );
  }
}
$(document).ready( function() {
  $('#testForm').click(function() {
    fontFamiliesTest( $('#fontFamily').val() );
  });
});
</script>
<style type="text/css">
.baseLine {
  font-size:100px !important;
}
</style>
</head>
<body>
<noscript>
<h1>Javascript Required</h1>
</noscript>
<p>Please enter the font-family declaration you would like to test fonts against:</p>
<form>
  <input type="text" name="fontFamily" id="fontFamily" value="'Comic Sans',Arial,monospace" />
  <input type="button" id="testForm" value="Go &raquo;" />
</form>
<div id="results">&nbsp;</div>
<div id="yourJavascript">&nbsp;</div>
</body>
</html>

Le script utilise la caractéristique de largeur de fontTestString pour chaque police à une hauteur de 100 px afin de déterminer quelle police est utilisée sur le site.

2
danlefree

Il n'y a aucun moyen de savoir. Mais ça ne devrait pas avoir d'importance. Une conception appropriée rendra le rendu correctement et sera utilisable quelle que soit la police utilisée par le système de l'utilisateur. Je ne m'inquiéterais pas pour ça.

1
John Conde

La façon dont fonctionne famille de polices est qu’elle vérifie la première police de la liste sur le système. S'il est présent, il l'utilisera. Sinon, on passera à la suivante. Donc, si vous avez la première police installée, il utilisera cette police. Cela s'appelle souvent une pile de polices parce que vous commencez par le haut et descendez au besoin.

1
Virtuosi Media

Utilisez WhatFont , à partir du Chrome Web Store.

1
Gaia

Enregistrez votre page Web au format HTML, puis modifiez l’ordre des polices dans le css et examinez les copies de la page dans le navigateur.

0
John Fro