ブラウザがテキストをレンダリングするために実際に使用しているフォントを確認するにはどうすればよいですか？

175

私のCSSはfont-family: Helvetica, Arial, sans-serif;ページ全体に対して" "を指定しています。一部のパーツで代わりにVerdanaが使用されているようです。これを確認できるようにしたいと思います。

ブラウザからWordにコピーして貼り付けようとしましたが、フォントが保持されません。

テキストのセクションに実際に使用されているフォントを特定する方法はありますか？

Firebugを使用すると、上記のようにフォントのリストが表示されますが[1]、どのフォントが使用されているかを確認する方法がわかりません。

  1. 間違ったリストが使用されていたことがわかりました。これにより、元のVerdanaの問題が解決されました。しかし、実際のレンダリングフォントを識別する方法があるかどうか、私はまだ興味があります。
css  browser  fonts 
— 洗面所
ソース
— ajm 2009年
以下の回答で説明されているFontFinderおよびWhatFontは、使用されているフォントを検出するための非常に大まかな方法​​です。؋このフォントで使用できないアガニ記号を選択すると、どちらも誤って「Quanttrocentro Sans」（プライマリフォント）と表示されました。
— 質問のオーバーフロー
@QuestionOverflow、今日のFirefoxとChromeには、フォントを判別するための組み込みツールがあります。彼らはされますので、フォントも同様に؋そのために使用されたものを紹介します、各グリフのフォントを表示します。
— Arjan
@アルジャン：2020年もそうですか？
— 貪欲なエリジウム
@devouredelysium、私の答えを見ましたか？単一のグリフを選択するだけで、使用されているフォントを確認できます。
— アルジャン

回答:

50

Wilfred Hughesの回答によれば、Firefoxはこれをネイティブでサポートするようになりました。この記事には詳細がありますます。

この回答の元は「Font Finder」プラグインを参照していましたが、それは4年前からだったからです。古い回答がこのように残り、コミュニティがそれらを更新できないという事実は、スタックオーバーフローの残りの数少ない失敗の1つです。

— ジェレミー・カウフマン
ソース
7
Firefoxの[Tools]> [Web Developer]> [Inspector]> [Fonts]でこれを使用する理由はありません（Wilfred Hughesの回答）
— skierpage '30 / 10/30
1
残念ながら、Firefox 47には、リンクしているこのブログで参照されている[フォント]タブがありません。この記事の詳細
— Zabba
3
「Firefox 47以降、フォントビューはデフォルトで無効になっています。現在、より充実した機能の代替に取り組んでいます。当面は、フォントビューを表示したい場合は、about：configにアクセスし、設定devtoolsを見つけてください。 fontinspector.enabled、それをtrueに設定します。」developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/…を参照してください。
— ダニエル・ル・
1
どうやら、設定devtools.fontinspector.enabledはFirefox 47でのみ必要でした：「Firefox 47 のみで、フォントビューはデフォルトで無効になっています。Firefox47でフォントビューを表示するには、にアクセスしabout:config、devtools.fontinspector.enabled設定を見つけて、に設定してくださいtrue。 Firefox 47では、フォントビューはデフォルトで有効になっています。」、@ DanielLe。
— Arjan、
1
@DanielLe、もちろん私はあなたがテキストをコピーしたときにそれが正しいことを理解していました:-)
— Arjan
151

現在、ChromeとFirefoxにはそのためのツールが組み込まれていますが、Safariではテキストをコピーして調査する必要があります。

まず、テキストを選択します。Firefoxでは、ページインスペクタにフォントビューがあります。

Firefoxフォントビュー

これにより、フォントがダウンロードされたかどうか、および使用されているスタイル（Regular、ExtraLight、Italic、BoldItalicなど）もわかります。

Chromeの場合、DevToolsの[Elements]に移動し、[Computed]タブに移動して、[Rendered Fonts]というセクションまでスクロールします。Firefoxとは異なり、これはベースフォント名のみを表示し、使用している特定のスタイルは表示しません。

Chromeウェブインスペクター

上記のスクリーンショットは、Unicodeテキストに対して複数のフォントが表示される可能性があることを示しています。Chromeは、6つのグリフ（「ペッカ」とスペース）が「Arial」を使用しており、1つ（「웃」）が「Apple SD Gothic Neo」を使用していることを通知します。

Arial —ローカルファイル（6個のグリフ）
Apple SD Gothic Neo —ローカルファイル（1個のグリフ）

実際のCSSは以下を定義します：

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

しかし、これらのフォントには多くの特殊文字が含まれていないことがよくあります。フォント情報はHTML要素ごとに機能するため、要素内のUnicodeテキストは実際に複数のフォントを使用できるため、複数のフォントも表示されます。疑問がある場合は、HTMLペインでテキストをダブルクリックして、不要なテキストを削除します。次に、周囲の要素をもう一度選択すると、オプションが1つだけ表示されます。この場合、両方のブラウザーが「Apple」文字に「Apple SD Gothic Neo Regular」を使用したことがわかります。

残念ながら、非常に同じマシン上の異なるブラウザー（および単一のブラウザーの異なるバージョンでさえ）は、ブラウザーがサポート/推奨するフォントタイプが原因で、異なるフォントを使用する可能性があります。たとえば、Macの場合、SafariはApple Advanced Technologyを好むかもしれませんが、FirefoxはMicrosoft OpenTypeをサポートしています（MacにMicrosoft Officeをインストールした後にアラビア語で問題が発生する可能性があります）。または、上のスクリーンショットの「웃」文字の場合、MacのChromeとFirefoxは最近「Apple SD Gothic Neo」（OpenType PostScript）を好みますが、古いバージョンのFirefoxは代わりに「TrueTypeフォント」である「AppleGothic Regular」を使用しました。 。

類似のフォントビューがないブラウザの場合は、テキストの一部をコピーしてワードプロセッサまたはリッチテキストエディタに貼り付け、特定のテキストを選択して、フォントドロップダウンリストに表示される名前を確認します。私のMacでは、Firefoxからの貼り付けでは機能しません（ "웃"の場合、Firefoxの "Apple SD Gothic Neo"は貼り付け時に "AppleMyungjo"に変換されます）が、SafariとChromeではうまく機能します。

ブラウザーからリッチテキストエディターに貼り付けられたテキスト

— アルジャン
ソース
1
Safariにプラグインなどがあるかご存知ですか？
— Andry
4
Chrome 47では、[計算済み]セクションの一番下までスクロールしてください。font-family表示されているとおりに（アルファベット順に）属性を展開しても、読み込まれているフォントは表示されません。この情報は下部に表示されます。
— Merchako
1
@Merchako、計算されたフォントが「serif」や「sans-serif」などの汎用フォントである場合はどうなりますか？では、実際のフォントはどのようにして入手するのでしょうか。
— Pacerier
2
@ Pacerier、Chromeでは[計算済み]タブを下にスクロールするだけです。Firefoxでは、別のタブを参照してください。
— アルジャン
1
@TMG、私はWebフォントがエイリアスを必要としないかもしれないと想像できましたが、いくつかのURLを直接参照できます。これは公開されている公開Webサイトですか？そうでない場合、Firefoxは何を表示しますか？
— Arjan 2017
30

WhatFontは、フォントスタック内のどのフォントがロードされているかを具体的に通知するChrome拡張機能です。

— user1100745
ソース
6
私にとっては、どのフォントが宣言されているかを示していますが、実際に使用されているフォントは示していません。
— panzi
3
この記事（updates.html5rocks.com/2013/09/…）によると、Dev Toolsは実際にレンダリングされたフォントを教えてくれます。
— ヨーク
WhatFontはレンダリングされたフォントを検出しようとしますが、そうではないようですgithub.com/chengyin/WhatFont-Bookmarklet/issues/13
— Chris Marisic
7

Firefoxの現在のバージョン（v7以降）には、「fontinfo」と呼ばれるアドオンがあり、ブラウザがフォールバックする場合を考慮して、（CSS font-familyプロパティの内容ではなく）使用されている実際のフォントを報告します。要求されたfont-familyが利用できないか、テキストで使用されている文字をサポートしていなかったため、別のフォント。

— ジョナサン
ソース
これまでのところ、これが最良の答えです
— Ingo Kegel
1

Firebug for Firefoxでその特定のセクションを確認してみてください。正確なプロパティがすべて表示されます。

— イェロエン
ソース
それでも、使用している特定のリストではなく、リストが表示されます...しかし、2番目のチェックで、Verdanaが何らかの方法でfont-familyリストに入り、これが私の元の問題の原因でした。ほんとありがと。
— ラバトゥルトル2009年
1
Firebugは、要素にそのフォントを与えるために実行されているルールも通知します-CSSがどこで問題が発生しているかを調べるのに非常に役立ちます。
— RichieHindle 2009年
Safari 4ベータ版にはWebInspectorもあります（スキンされた
— 火の
1
どんなツールを使用しても、常に完全なリストが手に入ると思います。使用されているフォントは、コンピュータにインストールされているリストの最初のものです。
— jeroen 2009年
2
Firebugは現在（1.11.4、おそらく以前にも）、現在のフォントを青で強調表示しています。
— Mark Vrabel 2013年
1

jeremyによって言及された "FontFinder"プラグインはここでは機能しないようで、実際にレンダリングされたフォント（Linux上のFirefox 4.0rc1）に関係なく、CSSリストの最初のフォントを提供します。ただし、次のプラグインは「正しい」フォントを提供しているようです。

コンテキストフォント

— デイブ・フォークト
ソース
残念ながら、Context Fontでも計算されたCSSファミリのみが表示されます。たとえば、セリフやサンセリフなどです。さらに、一部の文字が計算されたフォントに存在せず、ブラウザが別のフォントからそれを取得した場合でも、コンテキストフォントには、実際のフォントではなく、計算されたフォントファミリが表示されます。
— Jukka K. Korpela
0

Lalit Patelのテキスト測定アプローチとスクリプトに基づいて、現在選択されているテキスト（または何も選択されていない場合は）に使用されているフォントを推測できるブックマークレットを作成しましたbody。スタック内のどのフォントが使用されているかを把握する上で、私には非常にうまく機能しているようです！（sans-serifただし、実際に何にマップするかはわかりません。）

ここでそれらをつかみます： https //alanhogan.com/bookmarklets#font-stack-full

ソースはGitHubにあります。

参照：ほとんど同じコードを使用するこのCodePen。選択したさまざまな段落を試して、表を見て、更新を推測してください！

— アランH.
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.