web-dev-qa-db-ja.com

ブラウザで使用されている正確なフォントを見つける方法

CSSスタイルシートをfont-family:arial,helvicta,sans-serifとして使用しました。ブラウザでチェックしたとき、使用しているフォントがフォントファミリーからわからない。ブラウザが表示に使用する正確なフォントを知りたい。この場合、ブラウザは私が表示したテキストにArialまたはHelvictaまたはsans-serifを使用しています。

これをワードパッドに置いて確認しましたが、デフォルトのシステムフォントを使用しています。

cssfontsbrowsers
7
sreekanth

FirefoxのFont Finderアドオンが必要です。

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

Webページ上のテキストをクリックすると、そのテキストのフォント情報が表示されます（ファミリーから選択されたフォントを含む）。

私はそれを何年も使用してきましたが、とても便利です。

4
Steve Claridge

JQueryを使用してgenerateサイトで使用するフォント推測スクリプトを記述した、私が書いた小さなHTMLドキュメントを次に示します。

<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>

このスクリプトは、高さ100ピクセルの各フォントに対してfontTestStringの幅特性を使用して、サイトで使用されているフォントを判別します。

2
danlefree

知る方法はありません。しかし、それは問題ではありません。適切に設計されたものは、適切にレンダリングされ、ユーザーのシステムが使用するフォントに関係なく使用可能になります。私はこれを心配しません。

1
John Conde

Font-familyが機能する方法は、リストの最初のフォントについてシステムをチェックすることです。存在する場合、それを使用します。そうでない場合は、次へ進みます。したがって、最初のフォントがインストールされている場合、そのフォントが使用されます。これは多くの場合、フォントスタックと呼ばれます。これは、先頭から始めて、必要に応じて作業を進めるためです。

1
Virtuosi Media

Chrome Webストアの WhatFont を使用します。

1
Gaia

WebページをHTMLで保存し、CSSのフォントの順序を変更して、ブラウザーでページのコピーを確認します。

0
John Fro