18

CSS の font-familyプロパティ について、こちら

font-familyプロパティは、フォントの種類を指定する際に使用します。

フォントの種類はカンマ( , )で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。

指定したフォントがユーザーの環境にインストールされていない場合には、ブラウザで設定されたデフォルトのフォントで表示されます。

と記載されており、ブラウザやユーザー環境により選択されるフォントが異なることはわかるのですが、具体的にどのフォント(フォント名またはフォントの種類)が適用されているかを知る方法はあるでしょうか?

JavaScript で不可能であればブラウザの開発ツールでも構いません。

追記:Chrome と FireFox は開発ツールで確認できることが分かりました。
IE、Operaでも確認できる方法があればお願いします。

4 件の回答 4

16

Chromeの開発者ツールでStylesの右にあるComputedの一番下にRendered Fontsがあります。
実際に自分が使っている環境のものしか確認できませんがこれでどうでしょうか?

rendered Fonts

1
  • 自分の手元にあるChrome(バージョン 39.0.2171.95 m) は Styleタブの一番右下(Rendered Fonts)にありました。ありがとうございます。
    – jirolabo
    Commented 2015年1月2日 11:46
7

Firefoxだけですが、開発ツールのインスペクタでフォントを選ぶと指定タグ配下で利用されているフォントを表示させることができます。

日本語と英字で別のフォントが選択されている場合は両方が表示されます。

インスペクタのスクリーンショット

https://developer.mozilla.org/ja/docs/Tools/Page_Inspector#Fonts_view

フォントビュー

このビューでは、選択した要素で使用しているすべてのフォントを表示します。これはあなたのシステムで使用されたフォントを表示しており、CSS で指定されたフォントとは異なる可能性があることに注意してください:

指定タグ配下ですので、bodyタグなどを選ぶとページ内で利用されているフォントがすべて表示されることになります。

4

OperaもChromeとほぼ同じ開発者ツールがあり下記のように右下のRendered Fontsの項で現在適用されているフォントを確認することができます。

Rendered Fonts

2

Firebug は如何でしょうか?

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。