Chromeの開発者ペインでは、要素のこれらのCSS設定を見ることができます。
私が見る限り、すべてのfont-family
値はinheritです。
フォントファミリーの実際の価値はどうすればわかりますか?そして、継承階層からのルートフォントファミリー値の定義をどのようにトレースできますか?
Developer Tools > Elements > Computed > Rendered Fonts
質問に添付した画像には、Style
タブが表示されます。次のタブComputed
に変更すると、レンダリングされた実際のフォントファミリを示すレンダリングフォントを確認できます。
inherit
value は、使用される場合、プロパティの値が親要素の同じプロパティの値に設定されることを意味します。ルート要素(HTMLドキュメントのhtml
要素)には、親要素はありません。定義により、使用される値はプロパティの初期値です。初期値は、CSS仕様の各プロパティに定義されています。
font-family
property は、初期値が仕様で固定されておらず、ブラウザに依存するように定義されているという意味で特別です。これは、ブラウザのデフォルトのフォントファミリが使用されることを意味します。この値はユーザーが設定できます。
ルート要素から現在の要素まで(親子関係の意味で)要素の連続チェーンがある場合、すべてfont-family
がinherit
に設定されているか、スタイルシートでまったく設定されていない(これも継承を引き起こす)場合、フォントはブラウザのデフォルトです。
ただし、これはかなり面白くない。フォントをまったく設定しない場合、ブラウザのデフォルトが使用されます。実際の問題は異なる場合があります。ブラウザのスタイルシートを構成するスタイルシートの一部を見ているようです。状況に影響を与える他の、より興味深いスタイルシートがおそらく存在します。
その場合、ブラウザのデフォルトのフォントファミリが継承されます。
ブラウザのデフォルトのフォントをクロムで確認できます:設定> Webコンテンツ>フォントのカスタマイズ...
私は、ウェブページで使用されているフォントが何であるかを知りたいと思っており、その情報が「検査」ペインで見つけられることを望んでいます。
Whatfont Chrome拡張機能を追加してみてください。