定義されたフォントのどれがWebページで使用されたかを検出する方法は？

ページに次のCSSルールがあるとします。

body {
  font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

ユーザーのブラウザで使用された定義済みフォントの1つを検出するにはどうすればよいですか？

なぜこれをしたいのかと思っている人のために編集します：検出しているフォントには他のフォントでは使用できないグリフが含まれており、ユーザーがそのフォントを持っていない場合は、ユーザーにそのフォントをダウンロードするように求めるリンクを表示します私のWebアプリケーションを正しいフォントで使用できます。

現在、すべてのユーザーにダウンロードフォントリンクを表示しています。正しいフォントがインストールされていないユーザーにのみ表示したいと考えています。

私はそれが一種の疑わしいがかなり信頼できる方法で行われるのを見ました。基本的に、要素は特定のフォントを使用するように設定され、文字列はその要素に設定されます。要素のフォントセットが存在しない場合は、親要素のフォントを使用します。つまり、レンダリングされた文字列の幅を測定します。派生フォントとは対照的に、目的のフォントに対して期待されたものと一致する場合は、存在します。これは、等幅フォントでは機能しません。

これがどこから来たのか： Javascript / CSS Font Detector（ajaxian.com; 2007年3月12日）

フォントがインストールされているかどうかを確認するために使用できる簡単なJavaScriptツールを作成しました。
それは簡単なテクニックを使用し、ほとんどの場合正しいはずです。

github上の jFont Checker

@pat実際には、Safariは使用されるフォントを提供しません。Safariは、少なくとも私の経験では、インストールされているかどうかに関係なく、常にスタックの最初のフォントを返します。

font-family: "my fake font", helvetica, san-serif;

Helveticaがインストール/使用されていると仮定すると、次のようになります。

• Safariでの「私の偽のフォント」（そして私は他のWebkitブラウザを信じています）。
• GeckoブラウザーおよびIEでの「私の偽のフォント、helvetica、san-serif」。
• Opera 9の「helvetica」は、Geckoに合わせてOpera 10でこれを変更していると読みました。

私はこの問題に合格し、スタック内の各フォントをテストし、最初にインストールされたフォントのみを返すFont Unstackを作成しました。@MojoFilterが言及するトリックを使用しますが、複数がインストールされている場合にのみ最初のトリックを返します。@tlrobinsonが言及している弱点に悩まされていますが（WindowsはHelveticaの代わりにArialをサイレントに置き換え、Helveticaがインストールされていると報告します）、それ以外の場合はうまく機能します。

機能する手法は、計算された要素のスタイルを確認することです。これはOperaとFirefoxでサポートされています（私はSafariで偵察しますが、テストしていません）。IE（少なくとも7）はスタイルを取得するメソッドを提供しますが、計算されたスタイルではなく、スタイルシートにあるもののようです。quirksmodeの詳細：スタイルの取得

要素で使用されているフォントを取得する簡単な関数を次に示します。

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

このためのCSSルールは次のとおりです。

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

インストールされている場合はhelveticaを返し、インストールされていない場合はarialを返します。最後に、システムのデフォルトのsans-serifフォントの名前を返します。CSS宣言でのフォントの順序は重要です。

あなたが試すことができる興味深いハックは、マシンにインストールされているフォントを検出するために、たくさんの異なるフォントを使ってたくさんの隠し要素を作成することです。誰かがこのテクニックで気の利いたフォント統計収集ページを作ることができると私は確信しています。

簡略化したフォームは次のとおりです。

function getFont() {
    return document.getElementById('header').style.font;
}

より完全なものが必要な場合は、これをチェックしてください。

簡単な解決策があります-使用するだけelement.style.fontです：

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

この関数は、まさにあなたが望むことをします。実行時、ユーザー/ブラウザのフォントタイプを返します。これがお役に立てば幸いです。

別の解決策は、フォントを自動的にインストールすることです@font-face。これにより、検出の必要がなくなります。

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

もちろん、著作権の問題は解決しませんが、フリーウェアのフォントを使用したり、独自のフォントを作成したりできます。最適に動作するには、.eot＆.ttfファイルの両方が必要です。

CalibriはMicrosoftが所有するフォントであり、無料で配布するべきではありません。また、特定のフォントをダウンロードするようにユーザーに要求することは、あまりユーザーフレンドリーではありません。

フォントのライセンスを購入し、それをアプリケーションに埋め込むことをお勧めします。

Fountを使用しています。ファウントボタンをブックマークバーにドラッグしてクリックし、Webサイト上の特定のテキストをクリックするだけです。次に、そのテキストのフォントが表示されます。

https://fount.artequalswork.com/

あなたはこのウェブサイトを使用することができます：

http://website-font-analyzer.com/

それはあなたが望むものを正確に行います...

表示したいフォントの後ろのフォントファミリにAdobe Blankを配置すると、そのフォントにないグリフはレンダリングされません。

例えば：

font-family: Arial, 'Adobe Blank';

私が知る限り、要素内のどのグリフがその要素のフォントスタック内のどのフォントによってレンダリングされているかを通知するJSメソッドはありません。

これは、ブラウザにserif / sans-serif / monospaceフォントのユーザー設定があり、グリフがフォント内に見つからない場合に使用する独自のハードコードされたフォールバックフォントもあるという事実によって複雑になります。フォントスタック。そのため、ブラウザは、フォントスタックまたはユーザーのブラウザのフォント設定にないフォントで一部のグリフをレンダリングする場合があります。 Chrome Dev Toolsは、選択された要素のグリフに対してレンダリングされた各フォントを表示します。つまり、あなたのマシンでは、それが何をしているかを見ることができますが、ユーザーのマシンで何が起こっているのかを知る方法はありません。

たとえば、ウィンドウがグリフレベルでフォントの置換を行うように、ユーザーのシステムがこれに関与する可能性もあります。

そう...

興味のあるグリフについては、指定したフォントがなくても、ユーザーのブラウザ/システムのフォールバックによってレンダリングされるかどうかを知る方法はありません。

あなたはJSでそれをテストしたい場合は、Adobeの空白を含むフォントファミリと個々のグリフをレンダリングし、それがゼロであるかどうかを確認するために自分の幅を測定、可能性がしかし、あなたは、各グリフと徹底した反復処理する必要があると思いますが、テストしたい各フォントを、しかし、要素のフォントスタック内のフォントを知ることはできますが、ユーザーのブラウザーがどのフォントを使用するように構成されているかを知る方法はないため、少なくとも一部のユーザーについては、繰り返し処理するフォントのリストが不完全になります。（新しいフォントが出てきて慣れ始めた場合も、将来の保証にはなりません。）