1. ホーム
  2. javascript

[解決済み] あるWebページで、定義されたフォントのうちどれが使われているかを検出するには?

2022-04-28 16:50:45

質問

私のページに以下のようなCSSルールがあるとします。

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

ユーザーのブラウザで、定義されたフォントのどれが使用されているかを検出するにはどうすればよいですか?

なぜこんなことをしたいかというと、検出するフォントには、グリフが ではない 他のフォントで利用可能です。もしユーザーが ない そのフォントをダウンロードするよう求めるリンクを表示させたい(そうすれば、正しいフォントでウェブアプリケーションを使用できる)。

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

解決方法は?

ちょっとあやふやだけど、かなり確実な方法でやっているのを見たことがあります。基本的には、ある要素が特定のフォントを使用するように設定され、その要素に文字列が設定されます。 その要素に設定されたフォントが存在しない場合は、親要素のフォントを使用します。 そこで、何をするかというと、レンダリングされた文字列の幅を測定するのである。 それが、派生フォントではなく、目的のフォントに対して期待されるものと一致すれば、それは存在することになります。これは等幅フォントでは機能しません。

以下はその出所です。 Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)