定義されたフォントのどれが Web ページで使用されているかを検出するにはどうすればよいですか?

08-06-2019
|

質問

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

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

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

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

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

解決

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

その由来は次のとおりです。Javascript/CSS フォント検出器 (ajaxian.com;2007 年 3 月 12 日)

他のヒント

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

jフォントチェッカー github 上で

@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」は、Geckoに合わせてOpera 10でこれを変更していると読みました。

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

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

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

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

有効なテクニックは、要素の計算されたスタイルを確認することです。これは 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 宣言内のフォントの順序は重要であることに注意してください。

試してみることができる興味深いハックは、さまざまなフォントを使用して多数の隠し要素を作成し、マシンにインストールされているフォントを検出することです。きっと誰かがこの技術を使って気の利いたフォント統計収集ページを作ってくれるでしょう。

別の解決策は、次の方法でフォントを自動的にインストールすることです。 @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 ファイルを最適に動作させることができます。

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

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

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

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

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

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

https://fount.artequalswork.com/

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

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

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

置くことができますアドビブランクフォントファミリー内で、表示したいフォントの後に追加すると、そのフォントにないグリフは表示されなくなります。

例えば。：

font-family: Arial, 'Adobe Blank';

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

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

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

それで...

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

JS でテストしたい場合は、Adobe Blank を含むフォントファミリーを使用して個々のグリフをレンダリングし、その幅を測定してそれがゼロかどうかを確認できます。 しかし 各グリフを反復処理する必要があります。 テストしたい各フォント, ただし、要素フォントスタック内のフォントを知ることはできますが、ユーザーのブラウザがどのフォントを使用するように設定されているかを知る方法はないため、少なくとも一部のユーザーにとって、反復処理するフォントのリストは不完全になります。(また、新しいフォントが登場して使用され始めたとしても、将来保証されるわけではありません。)

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow