CSS font-family

スタイルシート属性 font-family はフォント(文字の書体)の種類を指定します。font スタイルシート属性でも同様の定義が行えます。

書式

font-family: font [,font ...]

属性

font-family属性にはつぎの値を指定する。

font
フォント名または総称ファミリ名を指定する。属性値はカンマで区切って複数並べて記述することもできる。複数指定した場合、左側の方が優先順位が高い。

総称ファミリはブラウザ環境に依存しない抽象的なフォント名である。総称ファミリの一覧を次の表に示す。

総称ファミリ (generic-family)
総称ファミリ名 説明
serif セリフ(ひげ飾りつき文字)。日本語の明朝体に相当。
sans-serif サンセリフ(ひげ飾りなしの文字)。日本語のゴシック体に相当。
monospace 等幅文字
fantasy 装飾文字
cursive 筆記体。日本語の草書体に相当。

総称ファミリは何らかのフォントに割り当てられているが、具体的にどのフォントに割り当てられているかはブラウザ環境によって異なる。

具体的なフォント名を指定する場合、ブラウザ環境によっては指定されたフォントが使用できない可能性があるため、属性値リストの中に総称ファミリ名を含めておくことが望ましい。

属性値リストに指定されたフォントがすべて使用できない場合、デフォルトのフォントで表示される。

フォント名に空白文字(スペース)が含まれる場合、フォント名を2重引用符(")または単引用符(')で括る。

font-familyの使用例と表示サンプル

複数の属性値を指定した場合、左側の値が優先される。

<p style="font-family: monospace, serif;">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

<p style="font-family: serif, monospace;">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

ブラウザ環境で対応していないフォント名が指定された場合、優先順位に従って対応するフォントを決定する。

<p style="font-family: not-exist-font, monospace;">The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

総称ファミリ

総称ファミリとは、どんなOSでも指定できるフォントである。

総称ファミリ
総称ファミリ サンプル
serif The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
sans-serif The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
monospace The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
fantasy The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
cursive The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。

Microsoft Windowsのフォント

Microsoft Windowsでは次のフォントを指定できる。

Microsoft Windowsのフォント
フォント サンプル
Yu Gothic UI The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
游ゴシック The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
游明朝 The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
Meiryo UI The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
メイリオ The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
MS 明朝 The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
MS P明朝 The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
MS ゴシック The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
MS Pゴシック The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
Arial The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
Courier New The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
Georgia The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
Impact The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
Times New Roman The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
Verdana The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。

Microsoft WindowsではMSゴシックフォントで表示し、その他のOSではsans-serifフォントで表示する場合は、次のように指定する。

<p style="font-family: 'MS ゴシック', sans-serif;">example</p>

macOSのフォント

macOSでは次のフォントを指定できる。

macOSのフォント
フォント サンプル
ヒラギノ角ゴシック The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
ヒラギノ丸ゴ The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。
ヒラギノ明朝 The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。

macOSではヒラギノ角ゴシックフォントで表示し、その他のOSではsans-serifフォントで表示する場合は、次のように指定する。

<p style="font-family: ヒラギノ角ゴシック, sans-serif;">example</p>

Androidのフォント

Androidでは次のフォントを指定できる。

Androidのフォント
フォント サンプル
Roboto The quick brown fox jumps over the lazy dog.
素早い茶色の狐が怠け者の犬を飛び越える。

AndroidではRobotoフォントで表示し、その他のOSではsans-serifフォントで表示する場合は、次のように指定する。

<p style="font-family: Roboto, sans-serif;">example</p>

参考文献

World Wide Web Consortium (2018) CSS Fonts Module Level 3