web-dev-qa-db-ja.com

font-familyは継承されます。 chrome開発者ペインでフォントファミリを見つける方法は?

Chromeの開発者ペインでは、要素のこれらのCSS設定を見ることができます。

enter image description here

私が見る限り、すべてのfont-family値はinheritです。

フォントファミリーの実際の価値はどうすればわかりますか?そして、継承階層からのルートフォントファミリー値の定義をどのようにトレースできますか?

19
Anthony Kong

Developer Tools > Elements > Computed > Rendered Fonts

質問に添付した画像には、Styleタブが表示されます。次のタブComputedに変更すると、レンダリングされた実際のフォントファミリを示すレンダリングフォントを確認できます。

Developer Tools > Elements > Computed > Rendered Fonts

28
Rafael Eyng

inherit value は、使用される場合、プロパティの値が親要素の同じプロパティの値に設定されることを意味します。ルート要素(HTMLドキュメントのhtml要素)には、親要素はありません。定義により、使用される値はプロパティの初期値です。初期値は、CSS仕様の各プロパティに定義されています。

font-family property は、初期値が仕様で固定されておらず、ブラウザに依存するように定義されているという意味で特別です。これは、ブラウザのデフォルトのフォントファミリが使用されることを意味します。この値はユーザーが設定できます。

ルート要素から現在の要素まで(親子関係の意味で)要素の連続チェーンがある場合、すべてfont-familyinheritに設定されているか、スタイルシートでまったく設定されていない(これも継承を引き起こす)場合、フォントはブラウザのデフォルトです。

ただし、これはかなり面白くない。フォントをまったく設定しない場合、ブラウザのデフォルトが使用されます。実際の問題は異なる場合があります。ブラウザのスタイルシートを構成するスタイルシートの一部を見ているようです。状況に影響を与える他の、より興味深いスタイルシートがおそらく存在します。

5

その場合、ブラウザのデフォルトのフォントファミリが継承されます。

ブラウザのデフォルトのフォントをクロムで確認できます:設定> Webコンテンツ>フォントのカスタマイズ...

enter image description hereenter image description here

3
Heejin

私は、ウェブページで使用されているフォントが何であるかを知りたいと思っており、その情報が「検査」ペインで見つけられることを望んでいます。

Whatfont Chrome拡張機能を追加してみてください。

1
Daine