font-familyに記述された複数のフォントの中からどのフォントが実際に要素に適用されたのか確認する
CSS を使って body 要素などに font-family を設定する場合、値として複数のフォントをカンマで区切って記述するのが一般的です。複数のフォントの中で先に記述したものほど優先順位が高く一番前のフォントを最初に適用しようとしますが、記述したフォントが端末にない場合などの理由でフォントが適用できない場合に 2 番目以降に記述されたフォントを順番に適用しようとします。この記事では font-family に複数のフォントが記述されている場合に、対象の要素に実際にどのフォントが適用されたのかを Chrome の DevTools で確認する方法について解説します。
(2021 年 07 月 05 日公開 / 2021 年 07 月 05 日更新)
要素に適用されたフォントを確認する
最初にブラウザとして Chrome を使用している場合の確認方法です。 Chrome DevTools を使用します。今回サンプルとして次の HTML ページを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style type="text/css">
p {
font-family: Arial, "Yu Gothic", sans-serif;
}
</style>
</head>
<body>
<p>
こんにちは。お元気ですか？
</p>
<p>
Hello. How are you?
</p>
<p>
Hello. お元気ですか？
</p>
</body>
</html>
p 要素に対して font-family プロパティを設定し、値として Arial、 "Yu Gothic" 、 sans-serif の 3 つを設定しています。 この中で一番優先順位が高い Arial は欧文フォントのため対象の文字が日本語の場合は適用されず次の "Yu Gothic" が適用されます。
それでは Chrome で先ほどの HTML ページを表示します。
3 つの p 要素に実際にどのフォントが適用されているか確認するために Chrome Dev Tools を表示します。 Chrome の画面右上にあるメニューアイコンをクリックし、表示されたメニューの中から「その他のツール」をクリックし、さらに「デベロッパーツール」をクリックしてください。
Chrome DevTools が表示されます。
適用されているフォントを確認するには DevToools の画面右側のウィンドウで「Computed」タブをクリックしてください。
次に DevTools の画面左側のウィンドウで、フォントを調べたい要素をクリックしてください。まず最初の p 要素をクリックしました。
画面右側のウィンドウを見ると「Rendered Fonts」というブロックがあり、その下にこの要素に適用されているフォントが表示されています。今回は "Yu Gothic" が適用されていることが確認できます。
画面左側のウィンドウで 2 番目の p 要素をクリックしたあと、画面右側のウィンドウを見てみると今回は Arial が適用されていることが確認できます。
なおフォントのあとに Local File と表示されているのは端末にインストールされているフォントを使用しているという意味になります。 Web フォントが適用されている場合は Local File の代わりに Network resource と表示されます。また xx glyphs はフォントが適用されている文字の数を表しています。
最後に画面左側のウィンドウで 3 番目の p 要素をクリックしてみます。この p 要素には日本語と英数文字が混在しています。画面右側のウィンドウを見てみると今回は "Yu Gothic" と Arial がそれぞれ 7 文字ずつ適用されていることが確認できます。
このように同じ p 要素の中でも文字単位でどのフォントを適用するのかが決まります。
-- --
font-family に複数のフォントが記述されている場合に、対象の要素に実際にどのフォントが適用されたのかを Chrome の DevTools で確認する方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。