前回の記事ではフォントの大きさや太さなど、フォントの微調整に関するCSSを紹介しましたが、今回はフォントの種類そのものを設定するCSSの話です。
フォントの種類の設定においては、pxやremといった単位に気をつける必要もなく、設定の仕方自体はフォントサイズなどと比べても簡単です。ですが、フォントサイズなどとは決定的に違う点があります。
それは、フォントの種類の表示は、ブラウザではなくOSにインストールされているフォントに依存するという点です。
フォントサイズであれば、WindowsでもMacでも、AndroidでもiPhoneでも、OSによってサイズ感が全然違うということにはなりません。
フォントサイズの調整はOS依存ではなく、ブラウザがしっかり調整してくれる部分なので、OSによって差が出てしまうということは基本的にないというわけです。
しかしフォントの種類に関しては、ブラウザにフォントがインストールされているわけではありません。
ブラウザに限らず文章入力ソフトなどでも様々なフォントが使えるのは、OS自体に多種多様なフォントがインストールされているからです。
そしてここで問題となるのは、全てのOSに同じフォントがインストールされているわけではないということです。
フォントの種類に関しては、「このフォントが好きで読みやすいから、これに設定しよう」というだけでは不十分と言えます。
CSSの設定の仕方自体はすごく簡単ですが、気をつけなければならないポイントが他のCSSプロパティとは大きく異なるという意味で、今回はフォントの種類の設定に的を絞って説明していきます。
◆ font-family（フォントファミリー）とは ◆
font-family（フォントファミリー）プロパティは、フォントの種類を調整するプロパティです。
■ セレクタ { font-family: ‘フォント名’; }
といった形で記述します。
この時、初心者を悩ませるのが
「フォント名にクォーテーションをつけるの？つけないの？ダブルクォーテーション？シングル？」
…という問題です。
結論、総称フォントファミリー以外、シングルクォーテーションで囲っとけばOKという認識で良いと思います。
解説サイト等では、「フォント名に日本語が入る時は必ずクォーテーションをつける」とか、「スペースが入る時は〜（以下略）」とか、色々書かれていますが、こういった場合でもクォーテーションをつけないでCSSが効いたりしてしまいます。
だからこそ、結局何が正しいのかよくわからなくなるのですが、「クォーテーションをつけたらNG」という場面はほとんどありません。（後述の総称フォントファミリーの指定時ぐらいです）
なので、会社やチームのルールがある時はそれに従い、自分一人でWebサイトを制作する時は「総称フォントファミリーの指定以外は、どんな時でもシングルクォーテーションをつけておく」というルールを決めておくと悩まずに済むかと思います。
- POINT!
- ・font-familyはフォントの種類を調整する！
- ・総称フォントファミリー以外は、シングルクォーテーションで囲っとけばOK！
◆ 総称フォントファミリーとは ◆
先ほどから「総称フォントファミリー」という言葉が出てきていますが、これは、どのようなデバイス・ブラウザから見ても確実にその系統（ゴシック・明朝など）のフォントが表示されるフォントファミリーのことです。
冒頭で、「Webサイトのフォント表示はデバイスにインストールされているフォントに依存する」と言いましたが、これにウソはなくてその通りです。
しかし、これにウソがないとすると、総称フォントファミリーという存在自体に矛盾が生じるように思えますよね。
なぜ総称フォントファミリーと呼ばれるものは、全てのデバイスで表示可能なのでしょうか？
それは、総称フォントファミリーを指定しておくと、ブラウザがそのデバイスで表示可能なフォントに変換するという仕組みになっているからです。
なので、総称フォントファミリーは指定したフォントが表示されない場合の保険という目的で設定されます。
総称フォントファミリーの種類はこの後で紹介しますが、総称フォントファミリーというフォントがあるわけではなくて、あくまでそのデバイスで表示可能な同系統のフォントに変換するように命令を出している…そんなイメージです。
そのため明朝体とかゴシック体とか、ざっくりとした指定しかできず、当然ながらデバイスやブラウザによって違うフォントで表示されます。
・総称フォントファミリー一覧
| 名称 | 字体 |
| serif | 明朝体 |
| sans-serif | ゴシック体 |
| cursive | 手書き体 Tegakitai |
| fantasy | 独特な装飾文字 fantasy |
| monospace | 等幅で表示 |
ご覧のように、cursiveやfantasyは英字にしか効果が及ばない上、読みやすいわけでもないです。
なので、設定したフォントが表示されない場合の保険という意味合いが強い総称フォントファミリーの中では、使用機会はあまりないかと思います。
そもそも、Macユーザーの方には何も変化なく見えていると思います。保険のための総称フォントファミリーとは言え、装飾系のフォントはOSによっては効かないことがあるので、なおさら使う機会はないです。
フォント指定に特にこだわりがなく、ゴシック体か明朝体かだけ指定できれば良いという場合は、総称フォントファミリーのみでfont-familyを指定しておいてもダメなわけではありません。
ただ、総称フォントファミリーに頼らずとも「全てとは言わないが多くのデバイスで表示可能」というフォントもたくさんあるので、まずはそういったフォントからWebサイトのデザインに合ったものを選定することが大切です。
- POINT!
- ・総称フォントファミリーとは、全てのデバイスで同系統のフォントを表示させられる設定のこと！
- ・総称フォントファミリーは、設定したフォントが表示されない場合の保険として使う！
◆ font-family の記述順序 ◆
font-familyのCSSの書き方は既に紹介しましたが、総称フォントファミリーの存在と他の注意点も踏まえた上で、もう一度確認していきたいと思います。
font-familyのCSSの記述は、
■ セレクタ { font-family: ‘フォント名’; }
でしたよね。ですが、これだけだと指定したフォント名が表示されない場合の保険がありません。
そこで、保険として総称フォントファミリーを付け加えます。
■ セレクタ { font-family: ‘フォント名’ , sans-serif; }
「,（カンマ）」で区切って、総称フォントファミリーを設定しました。
CSSでは命令が順々に読み込まれるので、優先的に適応させたいフォント指定を最初に書き、保険としての総称フォントファミリーは最後に書きます。
そしてここでもう一つ注意点です。
フォントの種類によっては「英数字にしか効かない」というケースも多くあります。
逆に言えば、英数字だけ特定のフォントで表示させたいということもよくあるでしょう。
そういった場合、かなや漢字・英数字など全ての表記に対応したフォントを先に指定してしまうと、英数字も含めてそのフォントで表示されてしまいます。
なので、英数字だけ特定のフォントに設定したいという場合、そのフォントを先頭に記述する必要があります。
たとえば、「英数字だけに対応したフォントAで英数字を表示させ、日本語はフォントBで表示」と設定したい場合は
■ セレクタ { font-family: ‘フォントA’ , ‘フォントB’ , sans-serif; }
という順番になるというワケです。
- POINT!
- ・font-familyを記述する時、総称フォントファミリーは最後に書く！
- ・優先させたいフォント指定から先に書く！
