私は私のページに次のCSSルールがあるとします。Webページで使用されたフォントの検出
body {
font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}
どのように定義されたフォントのいずれかがユーザのブラウザで使用されたかを検出することができますか？私はこれをしたい理由を疑問に思う人々のための
編集：私は検出が他のフォントでは使用できませんグリフのが含まれており、ユーザーは、私は、ユーザーに尋ねるのリンクを表示したいフォントを持っていないときだフォントそのフォントをダウンロードして、自分のWebアプリケーションを正しいフォントで使用できるようにします。
現在、すべてのユーザーのダウンロードフォントリンクを表示していますが、正しいフォントがインストールされていないユーザーに対してのみ表示したいと考えています。
私はそれが一種のiffyで行われているのを見ましたが、かなり信頼できる方法です。基本的に、要素は特定のフォントを使用するように設定され、その要素に文字列が設定されます。要素のフォントセットが存在しない場合は、親要素のフォントが使用されます。つまり、レンダリングされる文字列の幅を測定することです。派生フォントとは対照的に、希望のフォントに期待したものと一致する場合、それは存在します。 Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)
'canvas'要素から' measureText'を使う別のアプローチ：https://github.com/Wildhoney/DetectFont – Wildhoney
要素の計算されたスタイルを見ることである働く技術を：それはどこから来たのか
がここにあります。これはOperaとFirefoxでサポートされています（と私はサファリで偵察しますが、テストしていません）。 IE（7以上）は、スタイルを取得するメソッドを提供しますが、スタイルシート内にあったもので、計算されたスタイルではありません。 quirksmodeについての詳細：このためのCSSルールであった場合
/**
* 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;
}
}
：
#fonttester {
font-family: sans-serif, arial, helvetica;
}
そして、それはヘルベチカを返す必要がありますGet Styles
ここで要素に使用するフォントをつかむために、単純な機能ですそれがインストールされていない場合は、arial、最後にシステムのデフォルトのsans-serifフォントの名前。 CSS宣言のフォントの順序は重要であることに注意してください。
興味深いハックは、さまざまなフォントを使って多くの隠し要素を作成して、どのフォントがマシンにインストールされているかを検出することです。私は誰かがこのテクニックを使って素晴らしいフォントの統計情報を集めることができると確信しています。
これは、 "Helvetica、Arial、sans-serif"のようなCSSの完全な文字列を返します。実際に使用されているフォントは返されません。 –
@pat実際にSafariはフォントを使用しません。Safariは、少なくとも私の経験では、インストールされているかどうかにかかわらず常にスタックの最初のフォントを返します。
font-family: "my fake font", helvetica, san-serif;
ヘルベチカを使用/インストール1と仮定すると、あなたが買ってあげる：
私はこの問題を解決し、スタック内の各フォントをテストし、最初にインストールされたものだけを返すFont Unstackを作成しました。それは@MojoFilterが言及するトリックを使用しますが、複数がインストールされている場合は、最初のものだけを返します。 @tlrobinsonが言及している弱点（WindowsではArialの代わりにHelveticaを静かに置き、Helveticaがインストールされていると報告している）に苦しんでいますが、それ以外はうまくいきます。
私はあなたがフォントがインストールされているかどうか確認するためにそれを使用することができ、簡単なJavaScriptのツールを書きました。
これは単純な手法を使用しており、ほとんどの場合正しいはずです。 githubの上
これは受け入れられる回答である必要があります！素晴らしい仕事@Derek。 – mkoistinen
フォントの検出は問題を解決しません。宣言されたフォントを繰り返し処理して何が有効であるかを確認するために使用できますが、指定されたdivにどのフォントが使用されているかについての情報はほとんどまたはまったくありません。 JSからdivを作成する場合、どのようなフォントが使用されているかをどのように知ることができますか？ –
@JonLennartAasenden使用フォントを取得するには、 "computedStyle"プロパティを使用することができます（正確な名前は忘れましたが、そのようなものです）。 –
簡略化した形である：あなたがより完全なものが必要な場合は、アウトthisをチェック
function getFont() {
return document.getElementById('header').style.font;
}
。
シンプルなソリューション
function getUserBrowsersFont()
{
var browserHeader = document.getElementById('header');
return browserHeader.style.font;
}
この関数は正確にあなたがやりたいだろうがあります。実行時に、User/visitorブラウザフォントタイプが返されます。これが役立つことを願って
私はArialフォントを持っている要素でSafariでこれを試していますが、フォントとして取得しています。理由は何ですか？ –
最も可能性の高い理由は、これは設定されたフォントのみをチェックし、フォントセットがない場合はおそらくフォントとしてArialを使用している可能性があります。 – Josiah
もう1つの解決策は、検出の必要性を否定するかもしれない@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サイト上の特定のテキストをクリックするだけです。そのテキストのフォントが表示されます。
あなたが見たいフォントの後にフォントファミリにAdobe Blankを置くことができ、その後、そのフォントのどのグリフないがレンダリングされません。
：私の知る限り、その要素のフォントスタック内のどのフォントでレンダリングされている要素内のどのグリフ伝えるために何のJSの方法がありません承知しているよう
font-family: Arial, 'Adobe Blank';
。
これは、ブラウザにはserif/sans-serif/monospaceフォントのユーザー設定があり、ハードコードされたフォールバックフォントがあります。フォントスタック内のフォントブラウザは、フォントスタックまたはユーザーのブラウザのフォント設定に含まれていないフォントのグリフをレンダリングすることがあります。Chrome Dev Tools will show you each rendered font for the glyphs in the selected element。だからあなたのマシン上では何をしているのかを見ることができますが、ユーザのマシン上で何が起こっているのかを知る方法はありません。
また、ユーザーのシステムでは、たとえば次のようにこれに参加することもできます。グリフレベルでWindow does Font Substitution。
ので...あなたが興味を持っているグリフの場合
、あなたは、彼らはあなたが指定したフォントを持っていない場合でも、彼らは、ユーザーのブラウザ/システムのフォールバックによってレンダリングされるかどうかを知る方法はありません。
あなたはJSでそれをテストしたい場合は空白のAdobe含むフォントファミリと個々のグリフをレンダリングし、それがゼロであるかどうかを確認するためにその幅を測定することができ、しかしあなたは徹底的に各グリフを反復処理する必要があるとだろうをテストしたい各フォントがありますが、要素フォントスタック内のフォントを知ることはできますが、ユーザーのブラウザがどのようなフォントを使用するように設定されているかを知る方法はありません。不完全です。
ご注意：Calibriをダウンロードするリンクを提供している場合は、いくつかのマイクロソフト製品にバンドルされていますが、 **無料のフォントではありません**あなたはダウンロードのためにそれを提供することによって著作権を侵害しています。 –
覚えておかなければならないことは、一部のブラウザでは、不足しているフォントを類似のフォントに置き換えることになります。これはJavaScript/CSSの使い方では検出できません。たとえば、Arialがインストールされていない場合は、WindowsブラウザでHelveticaの代わりに使用されます。上記のトリックMojoFilterとdragonmatankはHelveticaがインストールされていることを報告しますが、Helveticaはインストールされていません。 – tlrobinson