定義されたフォントのどれがWebページで使用されていたかを検出する方法 -- javascript フィールド と html フィールド と css フィールド と fonts フィールド 関連 問題

How to detect which one of the defined font was used in a web page?












142
vote

問題

日本語

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

 <コード> body {     font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; }   

ユーザーのブラウザで定義されたフォントの1つを使用したのを検出できますか?

人々のために私がこれをやりたいのか疑問に思うのは、私が検出しているフォントには、他のフォントで利用可能な not のグリフが含まれているためです。ユーザーがフォントを持っている場合は、そのフォントをダウンロードするようにユーザーに尋ねるリンクを表示するようにしてください。

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

英語

Suppose I have the following CSS rule in my page:

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

How could I detect which one of the defined fonts were used in the user's browser?

For people wondering why I want to do this is because the font I'm detecting contains glyphs that are not available in other fonts. If the user does not have the font, then I want it to display a link asking the user to download that font (so they can use my web application with the correct font).

Currently, I am displaying the download font link for all users. I want to only display this for people who do not have the correct font installed.

</div
           
   
   

回答リスト

75
 
vote
vote
ベストアンサー
 

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

これはそこから来たところです。 JavaScript / CSSフォント検出器(Ajaxian.com; 2007年3月12日)

 

I've seen it done in a kind of iffy, but pretty reliable way. Basically, an element is set to use a specific font and a string is set to that element. If the font set for the element does not exist, it takes the font of the parent element. So, what they do is measure the width of the rendered string. If it matches what they expected for the desired font as opposed to the derived font, it's present. This won't work for monospaced fonts.

Here's where it came from: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

</div
 
 
 
 
33
 
vote

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

JFont Checker

 

I wrote a simple JavaScript tool that you can use it to check if a font is installed or not.
It uses simple technique and should be correct most of the time.

jFont Checker on github

</div
 
 
       
       
10
 
vote

@pat実際には、Safariは使用されているフォントを与えません。代わりに、少なくとも自分の経験では、インストールされているかどうかにかかわらず、常にスタック内の最初のフォントを返します。

<事前> <コード> font-family: "my fake font", helvetica, san-serif;

Helveticaがインストール/使用されていると想定されている、あなたは得る:

  • 「私の偽のフォント」はサファリの中で(そして他のWebKitブラウザを信じています)。
  • 「私の偽のフォント、Helvetica、San-Serif」、すなわちIE。
  • Opera 9の "Helvetica"は、彼らがこれを変えていることを読んでいます gecko。

この問題に合格し、 font unstack をテストします。スタック内のフォントと最初のインストール済みの1つだけを返します。 @MoJofilterの表現は@MoJofilterのテクニックを使用しますが、複数のインストールされている場合は最初のものを返します。 @tlrobinsonという故障(WindowsがHelveticaの静かに静かに代用し、Helveticaが設置されていると報告する)という弱点に苦しみますが、それはうまく機能します。

 

@pat Actually, Safari does not give the font used, Safari instead always returns the first font in the stack regardless of whether it is installed, at least in my experience.

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

Assuming Helvetica is the one installed/used, you'll get:

  • "my fake font" in Safari (and I believe other webkit browsers).
  • "my fake font, helvetica, san-serif" in Gecko browsers and IE.
  • "helvetica" in Opera 9, though I read that they are changing this in Opera 10 to match Gecko.

I took a pass at this problem and created Font Unstack, which tests each font in a stack and returns the first installed one only. It uses the trick that @MojoFilter mentions, but only returns the first one if multiple are installed. Though it does suffer from the weakness that @tlrobinson mentions (Windows will substitute Arial for Helvetica silently and report that Helvetica is installed), it otherwise works well.

</div
 
 
9
 
vote

機能する技術は、要素の計算されたスタイルを見ることです。これはOperaとFirefox(そしてSafariのReconではなく、テストしていません)でサポートされています。 IE(少なくとも7)はスタイルを得るための方法を提供しますが、計算されたスタイルではなくスタイルシートにあったものは何でもそうです。 QuirkSmode: get styles

要素で使用されているフォントをつかむ簡単な機能:

<事前> <コード> /** * 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; }

それがインストールされていない場合は、それがインストールされていない場合は、システムのデフォルトのSANS-SERIFフォントの名前をインストールする場合はHelveticaを返します。 CSS宣言内のフォントの順序は重要です。

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

 

A technique that works is to look at the computed style of the element. This is supported in Opera and Firefox (and I recon in safari, but haven't tested). IE (7 at least), provides a method to get a style, but it seems to be whatever was in the stylesheet, not the computed style. More details on quirksmode: Get Styles

Here's a simple function to grab the font used in an element:

/**  * 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;     } } 

If the CSS rule for this was:

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

Then it should return helvetica if that is installed, if not, arial, and lastly, the name of the system default sans-serif font. Note that the ordering of fonts in your CSS declaration is significant.

An interesting hack you could also try is to create lots of hidden elements with lots of different fonts to try to detect which fonts are installed on a machine. I'm sure someone could make a nifty font statistics gathering page with this technique.

</div
 
 
 
 
8
 
vote

簡易形式は次のとおりです。

<事前> <コード> function getFont() { return document.getElementById('header').style.font; }

何か完全なものが必要な場合は、この OUT。

 

A simplified form is:

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

If you need something more complete, check this out.

</div
 
 
8
 
vote

シンプルなソリューションがあります - <コード> element.style.font :

を使用するだけです。 <事前> <コード> function getUserBrowsersFont() { var browserHeader = document.getElementById('header'); return browserHeader.style.font; }

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

 

There is a simple solution - just use element.style.font:

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

This function will exactly do what you want. On execution It will return the font type of the user/browser. Hope this will help.

</div
 
 
       
       
7
 
vote

別の解決策は、検出の必要性を否定する可能性がある @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 &ampの両方が必要になります。 <コード> .ttf ファイルを最大限に活用するファイル。
 

Another solution would be to install the font automatically via @font-face which might negate the need for detection.

@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"); } 

Of course it wouldn't solve any copyright issues, however you could always use a freeware font or even make your own font. You will need both .eot & .ttf files to work best.

</div
 
 
3
 
vote

Calibriはマイクロソフトが所有するフォントであり、無料で配布されるべきではありません。また、特定のフォントをダウンロードするためにユーザーがユーザーフレンドリーではありません。

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

 

Calibri is a font owned by Microsoft, and shouldn't be distributed for free. Also, requiring a user to download a specific font isn't very user-friendly.

I would suggest purchasing a license for the font and embedding it into your application.

</div
 
 
       
       
2
 
vote

Fountを使っています。 Fountボタンをブックマークバーにドラッグし、それをクリックしてから、Webサイト上の特定のテキストをクリックする必要があります。そのテキストのフォントを表示します。

href="https://fount.artequalswork.com/" REL="nofollowNoreferrer"> https://fount.artequalswork.com/

 

I am using Fount. You just have to drag the Fount button to your bookmarks bar, click on it and then click on a specific text on the website. It will then show the font of that text.

https://fount.artequalswork.com/

</div
 
 
1
 
vote

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

href="http://website-font-analyzer.com/" real="nofollow noreferrer"> http://website-font-analyzer.com/

それは正確にあなたが欲しいものをします...

 

You can use this website :

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

It does exactly what you want...

</div
 
 
 
 
1
 
vote

Adob​​e Blank の後にあなたが見たいフォント、そしてそのフォントの中にあるグリフはレンダリングされません。

e.:

<事前> <コード> font-family: Arial, 'Adobe Blank';

私が要素内のどのグリフがその要素のフォントのフォントがどのフォントにレンダリングされているかを知らせるJSメソッドはありません。

これは、ブラウザがSERIF / SANS-SERIF / MONOSPACEフォントのユーザー設定を持っているという事実によって複雑になり、グリフがどのようなものではない場合にも使用する独自のハードコーディングされたフォールバックフォントもあります。フォントスタック内のフォント。 SO Browserは、フォントスタックまたはユーザーのブラウザフォント設定ではないフォントにグリフをいくつかレンダリングすることができます。 chrome devツールは、選択された要素のグリフの各レンダリングフォントを表示します。それであなたのマシンであなたはそれが何をしているのか見ることができますが、ユーザーのマシンで何が起こっているのかを伝える方法はありません。

ユーザーのシステムがこれで部分を演奏することも可能です。 ウィンドウは、グリフレベルでフォント置換 。

so ...

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

JSでテストしたい場合は、アドビ空白を含むフォントファミリで個々のグリフをレンダリングし、ゼロであるかどうかを確認することができます。 徹底的に繰り返す必要があります各グリフとそれぞれのフォントはをテストしたいと思っていますが、あなたは要素のフォントスタックのフォントを知ることができますが、ユーザーのブラウザが少なくともいくつかのために使用するように構成されているフォントを知る方法はありません。あなたのユーザーが繰り返し繰り返すフォントのリストは不完全になります。 (新しいフォントが出て慣れる場合は将来の証明もありません。)

 

You can put Adobe Blank in the font-family after the font you want to see, and then any glyphs not in that font won't be rendered.

e.g.:

font-family: Arial, 'Adobe Blank'; 

As far as I'm aware there is no JS method to tell which glyphs in an element are being rendered by which font in the font stack for that element.

This is complicated by the fact that browsers have user settings for serif/sans-serif/monospace fonts and they also have their own hard-coded fall-back fonts that they will use if a glyph is not found in any of the fonts in a font stack. So browser may render some glyphs in a font that is not in the font stack or the user's browser font setting. Chrome Dev Tools will show you each rendered font for the glyphs in the selected element. So on your machine you can see what it's doing, but there's no way to tell what's happening on a user's machine.

It's also possible the user's system may play a part in this as e.g. Window does Font Substitution at the glyph level.

so...

For the glyphs you are interested in, you have no way of knowing whether they will be rendered by the user's browser/system fallback, even if they don't have the font you specify.

If you want to test it in JS you could render individual glyphs with a font-family including Adobe Blank and measure their width to see if it is zero, BUT you'd have to iterate thorough each glyph and each font you wanted to test, but although you can know the fonts in an elements font stack there is no way of knowing what fonts the user's browser is configured to use so for at least some of your users the list of fonts you iterate through will be incomplete. (It is also not future proof if new fonts come out and start getting used.)

</div
 
 

関連する質問

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

3  Fontsが埋め込まれていないGhostscriptとPDF  ( Ghostscript and pdf with fonts not embedded ) 
My System Configは、GhostScript 9.02のOS Xです。 フォントの置換を実行できるようにするGSでファイルを追加して設定する方法を知りたい(ステップバイステップ)。 私のGSのインストールはファイルをインストール/作成していませ...

1  アプリは「フォントキャッシュからパージ」を保ち、最終的には低メモリ、Androidのためにクラッシュする  ( App keeps purging from font cache and eventually crashes due to low memory an ) 
私はアプリの構築の始まり(まだ何もしていませんが、いくつかのボタンを表示する)とそれを実行するとき、私はLogcatでエラーメッセージを入手します: 「フォントキャッシュから193Kを締めくくる[23エントリー]」 何分以内に、上に、メモリが低いためにアプリが...

1  NETでフォント情報を取得する  ( Getting font information in net ) 
私は誰もがプログラム的にバージョンと著作権の詳細のようなものを真のタイプのフォントから出す方法を知っているかどうか疑問に思いました。エクスプローラで開くと、プレビューがWindowsフォントビューアにこの情報を入手してください。 Logfontの構造を見ました...

41  Mac上の表示名からフォントへのフルパスを見つけるにはどうすればよいですか。  ( How can i find the full path to a font from its display name on a mac ) 
PhotoshopのJavaScript APIを使用して、特定のPSDのフォントを見つけています。 APIから返されたフォント名を指定して、フォント名がディスク上に対応する実際の物理フォントファイルを見つけたい。 これはOSX上で実行されているPytho...

182  プログラミングのための推奨フォント? [閉まっている]  ( Recommended fonts for programming ) 
現在立つにつれて、この質問は私たちのQ&AMPにとって良いフィットではありません。フォーマット。私たちは事実、参考文献、または専門知識によって支持されることを期待していますが、この質問は...

15  長方形に合うようにフォントを拡張する方法が必要  ( Need a way to scale a font to fit a rectangle ) 
四角形の内側に収まるようにフォントを縮小するためのコードを書きました。それは18幅で始まり、それが合うまで繰り返されます。 これは恐ろしい非効率的だと思われるが、それをするための非ループの方法を見つけることができない。 この行は、スケールなゲームグリッド内のラ...

0  SSRSは、さまざまなデプロイされた異なる展開対VSエクスポートへのエクスポート  ( Ssrs export to pdf formatting different deployed versus vs export ) 
SSRSレポートを表示して結果をプレビューした場合は、プレビューをPDFにエクスポートすることを選択してください。 (フォントは正しく表示され、正常にフォーマットされています。) IISに報告を展開し、IEを使用してWebレポートを通過し、その結果を内部か...

13  Javaの下線フォントの定数値は何ですか?  ( What is the constant value of the underline font in java ) 
Javaの下線フォントの定数値は何ですか? font.bold 太字フォント font.italic italic フォント 下線フォントは定数どれですか? 私はすべての利用可能な定数を試してみましたがそれはうまくいきませんでした。 ...

1  フォント顔は1ページずつ作品します - 問題は何ですか? [閉まっている]  ( Font face works on all but one page what could be the issue ) 
この質問は将来の訪問者を助けることはほとんどありません。それは、小さな地理的地域、特定の瞬間、またはインターネットの世界的な聴衆に一般的に適用されない非常に狭い状況に関連しています。この...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有