152

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

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

定義されたフォントのどれがユーザーのブラウザで使用されたかをどのように検出できますか？

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

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

4

11 に答える 11

80

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

それがどこから来たのか： Javascript / CSSフォント検出器（ajaxian.com; 2007年3月12日）

于 2008-08-03T21:51:44.360 に答える
36

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

githubの jFont チェッカー

于 2011-05-21T17:58:10.617 に答える
11

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

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

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

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

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

于 2009-05-20T10:57:24.267 に答える
10

機能するテクニックは、要素の計算されたスタイルを調べることです。これは 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 を返し、最後にシステムのデフォルトのサンセリフ フォントの名前を返します。CSS 宣言でのフォントの順序は重要であることに注意してください。

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

于 2008-08-25T22:16:21.723 に答える
9

簡略化された形式は次のとおりです。

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

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

于 2011-10-23T13:32:13.487 に答える
9

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

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

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

于 2011-11-29T08:40:29.367 に答える
7

別の解決策は、フォントを自動的にインストールすることです@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

于 2012-01-05T11:19:13.653 に答える
4

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

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

于 2012-11-14T18:56:40.510 に答える
2

表示したいフォントの後にAdob​​e Blankを font-family に入れると、そのフォントにないグリフはレンダリングされません。

例えば：

font-family: Arial, 'Adobe Blank';

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

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

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

それで...

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

JS でテストしたい場合は、個々のグリフを Adob​​e Blank を含むフォント ファミリでレンダリングし、それらの幅を測定してゼロかどうかを確認できますが、各グリフとテストしたい各フォントを徹底的に反復する必要があります。ただし、要素のフォント スタック内のフォントを知ることはできますが、ユーザーのブラウザーがどのフォントを使用するように構成されているかを知る方法はありません。そのため、少なくとも一部のユーザーについては、繰り返し使用するフォントのリストが不完全になります。(また、新しいフォントが出て使用され始めたとしても、それは将来の証明ではありません。)

于 2017-11-30T10:58:47.953 に答える
1

このウェブサイトを使用できます：

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

それはまさにあなたが望むことをします...

于 2015-04-11T20:41:28.363 に答える