font-familyプロパティの説明
CSSのfont-familyプロパティは、ブラウザが表示するフォントの種類や総称ファミリー名の優先順位を指定します。複数の値をカンマ区切りで指定することで、先頭から順に利用可能であれば採用すべきフォントを示すことができます。
ここで指定されたフォントは、端末にインストール済み、あるいはダウンロード可能であれば、画面に表示される文字列に適用されます。利用可能なフォントがなかった場合のために、総称ファミリー名を必ず併記しておきましょう。
フォントの最適化は一文字ずつ行われます。要素のまとまりや段落単位で共通のフォントが使われるわけではありません。英文と日本語が混在している文章であれば、それぞれの文字に利用できるフォントを個別に適用します。数字や記号なども指定されたリストの中から利用可能なものを探します。他のプロパティで指定された文字の太さや装飾によって、フォントの選択に影響が出る場合もあります。
CSSによるフォントファミリーの指定は絶対的なものではありません。あくまで製作者側が意図している理想的な書体を提案するものです。ユーザー側でブラウザの既定値を優先していたり、ユーザーエージェントの設定が優先されるような環境では、ここで指定した値は保証されません。
フォント関連のプロパティを一括で指定する場合は、ショートハンド・プロパティのfontを使用して下さい。
font-familyに指定できる値
<family-name>- フォントファミリーの名称です。そのフォントを呼び出すための名称を指定します。名称にスペースが含まれる場合は原則として引用符で囲むことを推奨します。
<generic-name>- 総称フォントの名称です。指定されたフォントがどれも利用できなかった場合に、ブラウザがOSに標準でインストールされているフォントの中から選択するためのヒントを与えます。これを指定しておくことで、製作者側の意図を最低限反映させることができます。基本的には値の末尾に記載します。
総称フォントファミリーの一覧
CSSのfont-familyで指定できる総称フォントファミリーの一覧です。要素にフォントを指定する祭は、値の末尾にこの中のいずれかを記載しておきましょう。
| 名称 | 説明 |
|---|---|
| serif | セリフ体を表す総称ファミリー名です。文字の先端に飾りがついたフォントを表示します。セリフを持つ書体のことをローマン体と呼びます。 |
| sersans-serifif | サンセリフ体を表す総称ファミリー名です。文字の先端に飾りがつかないフォントを表示します。日本ではゴシック体とも呼ばれますが、欧文ではブラックレターのことを指すため正確ではありません。 |
| monospace | 全ての文字が同じ幅を持つ等幅書体を表す総称ファミリー名です。モノスペースとはグリフ幅が固定されているという意味です。 |
| cursive | 筆記体を表す総称ファミリー名です。筆記体は毛筆やペンで書かれた手書き風の文字を表します。多くの場合、斜体になっていたり文字同士がつながって見えます。 |
| fantasy | 個性的な装飾を持つ書体の総称ファミリー名です。遊び心に溢れた書体や独特の雰囲気を持つ文字を表示します。 |
| system-ui | システムで既定となっているユーザーインターフェイスを表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせて取ります。 |
| ui-serif | ユーザーインターフェイスのセリフ体を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせてセリフ体で表示します。 |
| ui-sans-serif | ユーザーインターフェイスのサンセリフ体を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせてサンセリフ体で表示します。 |
| ui-monospace | ユーザーインターフェイスの等幅を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせて等幅フォントで表示します。 |
| ui-rounded | ユーザーインターフェイスの丸字体を表す総称ファミリー名です。書体やグリフをユーザーインターフェイスに合わせて丸字体で表示します。 |
| math | 数式などで使われる独自の書体を持つ総称ファミリー名です。上付き文字や下付き文字、複数の行をまたぐ括弧、入れ子の数式、明確な意味を持った二重のグリフなどがあります。 |
| emoji | 絵文字を表示するために特別な文字セットを持つ総称ファミリー名です。 |
| fangsong | 中国語の文字を表す特別な総称ファミリー名です。セリフ体風の Song と手書き風の Kai を合わせたような表現を持ちます。 |
font-familyの使い方とサンプルコード
font-familyプロパティの構文は以下の通りです。
/* サンセリフ体の指定 */
font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-family: "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
/* セリフ体の指定 */
font-family: "Times New Roman", serif;
font-family: "Hiragino Mincho ProN W3", "YuMincho", serif;
font-family: "ヒラギノ明朝 ProN W3", "ＭＳ Ｐ明朝", serif;
/* 総称ファミリー名 */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;
/* グローバル値 */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: unset;
font-familyの実例
それでは実際にfont-familyプロパティの書き方を見ていきましょう。以下の例は、個別の総称ファミリー名を与えた要素の比較を表しています。
<section class="samp_box">
<p id="ff_serif">font-family: serif; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
<p id="ff_sans">font-family: sans-serif; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
<p id="ff_mono">font-family: monospace; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
<p id="ff_cur">font-family: cursive; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
<p id="ff_fan">font-family: fantasy; ABCDEFG. 0123456789. あいうえおカキクケコ。</p>
</section>
.samp_box {
overflow: auto;
width: 100%;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
#ff_serif {
font-family: serif;
}
#ff_sans {
font-family: sans-serif;
}
#ff_mono {
font-family: monospace;
}
#ff_cur {
font-family: cursive;
}
#ff_fan {
font-family: fantasy;
}
具体的なフォントファミリーの指定
フォントファミリーの指定にこだわるのであれば、まずは大手企業の公式サイトや利用者が多いウェブサービスが採用している値を確認しましょう。不特定多数のユーザーが利用するサイトでは、多様な環境で表示されることを想定した内容となっています。その中で、共通している内容を押さえて自身が手掛けるサイトの特性に合ったトレンドを取り入れていくと上手くいきます。
/* シンプルなゴシック体の指定 */
body {
font-family: Hiragino Kaku Gothic Pro, Meiryo, sans-serif;
}
/* 日本語表記でゴシック体を指定 */
body {
font-family: "ヒラギノ角ゴ Pro", "メイリオ", sans-serif;
}
/* シンプルな明朝体の指定 */
body {
font-family: Hiragino Mincho ProN, Yu Mincho, serif;
}
/* 大手ポータルサイトの指定内容 */
body {
font-family:
ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro,
メイリオ, Meiryo,
Osaka,
ＭＳ Ｐゴシック, MS PGothic,
sans-serif;
}
/* 有名ローバル企業の指定内容 */
body {
font-family:
"SF Pro JP", "SF Pro Text", "SF Pro Icons",
"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
メイリオ, Meiryo,
"ＭＳ Ｐゴシック",
"Helvetica Neue", Helvetica,
Arial,
sans-serif;
}
/* 大手動画サイトの指定内容 */
body {
font-family:
Avenir,
Lato,
-apple-system,
BlinkMacSystemFont,
Helvetica Neue,
Hiragino Kaku Gothic ProN,
Meiryo,メイリオ,
sans-serif;
}