もくじ
フォントファミリーとは
文字の書体を指定する属性にfont-familyがあります。
値には、フォントファミリー名や後で説明する総称フォント名を複数指定することができます。
body {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ W3", Arial, "メイリオ", Meiryo, sans-serif;
}
フォントファミリーは文字の書体のことを指し、日本語には大きなカテゴリーとしてゴシック体、明朝体、楷書体などがあります。
ゴシック体にも多くの種類の書体があり、明朝体にも多くの種類の書体があります。
これらのフォントファミリーは端末にインストールされていれば使用することができますが、インストールされていなければ使用することができません。font-family属性には複数の値をカンマ（,）区切りで指定します。
左に指定したフォントファミリーが一番優先度が高く、もし端末にインストールされていない場合はその次に指定しているフォントファミリーを使用しようとします。
理解度チェック
- ゴシック体と明朝体の違いについて調べてみましょう！
- 端末ごとに表示されるWebのフォントファミリーは異なる場合がありますが、なぜだか理解できましたか？
- フォントファミリーをリスト形式で指定するのはなぜでしょうか？
総称フォントとは
Webで使用する代表的な書体に、セリフ（serif）体とサンセリフ（sans-serif）体があります。
これらは総称フォントと呼ばれ、セリフ体は明朝体、サンセリフ体はゴシック体を意味します。
セリフ体
div {
font-family: serif;
}
サンセリフ体
div {
font-family: sans-serif;
}
総称フォントの使い方
総称フォントは、指定するフォントファミリーのどれもが利用できない場合に代替的に使用されるフォントとして指定します。
例えば、ゴシック体で文字を表示しようとした場合は次のように指定します。
body {
font-family: "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}
"ヒラギノ角ゴ Pro W3"と"ヒラギノ角ゴ W3"はMac OSに搭載されている日本語のゴシック体フォントです。"メイリオ"と"ＭＳ Ｐゴシック"はWindows OSに搭載されています。
このどれもが搭載されていない場合に、総称フォントのsans-serifが適用されます。
- 総称フォントは、どのフォントファミリーも適用できなかった場合の最終的な代替手段として使用されます。そのため、フォントファミリーのリストの最後に必ず指定するように心掛けましょう。
セリフ体やサンセリフ体のフォントはユーザーが設定できる
この総称フォントはブラウザごとに設定できるという点にも注意が必要です。
例えば、次の画像はChromeのフォントカスタマイズ画面ですが、ここでserifやsans-serifに適用されるフォントファミリーをユーザー自身で指定することができます。
-
総称フォントの
serifが確実に明朝体となり、sans-serif体が確実にゴシック体になる保証はありません。
代表的な総称フォント
| 総称フォント名 | 説明 | 例 |
|---|---|---|
serif |
明朝体フォント | ヒラギノ明朝、MS P明朝 |
sans-serif |
ゴシック体フォント | ヒラギノ角ゴシック、メイリオ |
monospace |
すべての字が等幅であるフォント | Osaka-Mono、MSゴシック |
cursive |
筆記体フォント | Script、Comic Sans MS |
fantasy |
遊び心のある装飾系フォント | Papyrus、alba |
理解度チェック
- 総称フォントについて説明してください！
- 総称フォントはどの様な場合に使用されますか？
- 総称フォントはどこに指定しますか？
フォント指定の決まりごと
フォントファミリーには、ダブルクォート（"）またはシングルクォート（'）の引用符で囲まなければいけない場合と囲んではいけない場合があります。
body {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ W3", Arial, "メイリオ", Meiryo, sans-serif;
}
引用符で囲む必要がある場合
空白がある場合は引用符で囲みましょう。
❌Hisagino Sans ⭕"Hiragino Sans"
英字以外の数値や記号、日本語が含まれる場合も引用符で囲みます。
❌メイリオ ⭕"メイリオ"
❌Ueten 1c ⭕"Ueten 1c"
引用符で囲んではならない場合
総称フォントは引用符で囲んではいけません。
⭕serif ❌"serif"
⭕sans-serif ❌"sans-serif"
- 判断に迷ったら「総称フォント以外は引用符で囲む」で問題ありません。
フォントファミリーを外部から読み込んで使用する
端末によって使用できるフォントファミリーが異なるため、どの端末でも一貫したデザインを保つためには外部からフォントファミリーを読み込んで使用する方法があります。
Webで使用できるフォントを配布している代表的なサービスにGoogle Fontsがあります。
この中から、日本語フォントの「RocknRoll One」を使用すると次のようになります。
<head>
...
<!-- フォントファミリーを読み込みます -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">
<style>
p {
font-family: 'RocknRoll One', sans-serif;
}
</style>
...
</head>
<body>
<p>僕は冬より夏が好きです。皆さんはどうですか？</p>
</body>
僕は冬より夏が好きです。皆さんはどうですか？
このように外部から読み込むことで、どの端末でも決まったフォントファミリーを使用することが可能です。
しかし、日本語のフォントファミリーは「ひらがな」「カタカナ」「漢字」を含むことから、読み込むファイルのサイズが大きくなりがちです。
そのため、特に通信環境の悪い場所では正しく表示されるまで時間が掛かってしまい「重たいサイト」と思われてしまうこともあります。
フォントファミリーから決まった文字だけを読み込む方法もありますので、使用する場面や使用する方法はしっかり考える必要があります。
理解度チェック
- フォントファミリーを外部から読み込んで使用してみましょう！