ブラウザが実際にテキストのレンダリングに使用しているフォントを確認するにはどうすればよいですか？
私のCSSは「font-family: Helvetica, Arial, sans-serif; "ページ全体で使用できます。一部の部分で代わりにVerdanaが使用されているようです。これを確認したいと思います。
ブラウザーからコピーしてWordに貼り付けようとしましたが、フォントが保存されていません。
テキストのセクションに実際に使用されているフォントを特定する方法はありますか？
Firebugは上記のフォントのリストを提供します[1]が、どのフォントが使用されているかを判断する方法がわかりません。
- 間違ったリストが使用されていたことが判明しました。これにより、元のVerdanaの問題が解決しました。しかし、実際のレンダリングフォントを識別する方法があるかどうかはまだ興味があります。
Wilfred Hughes 'answer ごとに、Firefoxはこれをネイティブにサポートするようになりました。 この記事には詳細があります 。
この回答の元は「Font Finder」プラグインを参照していましたが、それは4年前のものでした。古い回答がこのように残っており、コミュニティがそれらを更新できないという事実は、スタックオーバーフローの数少ない残りの失敗の1つです。
最近ではChromeとFirefoxにはそのための組み込みツールがありますが、Safariではテキストをコピーして調査する必要があります。
Firefoxでは、ページインスペクターに フォントビュー があります。
これにより、フォントがダウンロードされたかどうかもわかります。
Chromeの場合、DevToolsの「要素」に移動し、「計算済み」タブに移動して、「レンダリングされたフォント」というセクションまでスクロールダウンします。
上記のスクリーンショットは、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 SD Gothic Neo Regular」が使用されたことがわかります。
残念ながら、まったく同じマシン上の異なるブラウザー（および単一のブラウザーの異なるバージョンでさえ）は、ブラウザーがサポート/優先するフォントの種類により、異なるフォントを使用する場合があります。たとえば、Macでは、SafariはApple Advanced Technologyをサポートしますが、FirefoxはMicrosoft OpenTypeをサポートします（MacにMicrosoft Officeをインストールすると アラビア語の問題 が生じる可能性があります）。または、上記のスクリーンショットの「웃」文字については、Chromeと私のMacのFirefoxは最近「Apple SD Gothic Neo」（OpenType PostScript）を好むが、Firefoxの古いバージョンは「AppleGothic Regular代わりに（これはTrueTypeフォントです）。
同様のフォントビューを持たないブラウザの場合は、テキストの一部をコピーしてワードプロセッサまたはリッチテキストエディタに貼り付け、特定のテキストを選択して、フォントドロップダウンリストに表示される名前を確認します。私のMacでは、Firefoxからの貼り付けでは機能しません（「웃」の場合、Firefoxの「Apple SD Gothic Neo」は貼り付けで「AppleMyungjo」に変換されます）が、SafariおよびChromeではうまく機能します。
WhatFont はChromeフォントスタックのどのフォントを具体的に示す拡張機能ですロードされています。
Firefox 22+は、現在使用されているフォントを表示します 、拡張子なし。
Firefoxの現在のバージョン（v7以降）には、「fontinfo」と呼ばれるアドオンがあり、ブラウザがフォールバックするケースを考慮して、使用されている実際のフォントを（CSSフォントファミリプロパティの説明ではなく）報告します要求されたフォントファミリーが利用できないか、テキストで使用されている文字をサポートしていなかったため、異なるフォント。
Jeremyが言及した「FontFinder」プラグインはここでは機能しないようで、実際にレンダリングされたフォント（Linux上のFirefox 4.0rc1）に関係なくCSSリストの最初のフォントを提供します。しかし、次のプラグインは「正しい」フォントを提供するようです。
FirefoxのFirebugで特定のセクションを確認してみてください。すべての正確なプロパティを提供する必要があります。
Lalit Patelのテキスト測定アプローチとスクリプトに基づいて、 bookmarklets を作成しました。これは、現在選択されているテキスト（またはbody（何もなければ）選択済み）。スタック内のどのフォントが使用されているかを判断するのに非常にうまく機能しているようです！ （どのようなsans-serifは実際にマップされます。
ここでそれらをつかみます： https://alanhogan.com/bookmarklets#font-stack-full
ソースは GitHubで です。
参照： this CodePen 、ほとんど同じコードを使用します。選択した異なる段落で試してみて、テーブル/推測の更新を見ます！