57.Webフォントを使う ～font-familyとwebフォント～
フォントファミリーって何となく決めていませんか？
私は最初に教わったフォントファミリーを後生大事に温めていた口です。
でも、それも今回でおさらば。
何故、そうやって指定しているのかを知れば
自分で決めることができるようになります。
本日はWebフォント等のCSSで指定するフォントについて整理していきます。
では早速やっていきましょう。
font-familyとは
一言で表すなら、
「ブラウザが文字を表示する時に使うフォントの一覧」
です。
今この記事を読んでいるあなたの、
iPhoneなのかMacなのかAndroidなのかWindowsなのかiPadなのか
わかりませんが…
今、読んでいるこの「文字達のフォント」を指定しているのです。
そして、フォントファミリーは大体２つ以上は指定します。
何故か？
デバイス(WindowsPCとかiPhoneとか機器のこと)によって
入っている(使っている)フォントが異なるからです。
Windowsではキレイに表示されるけど、iPhoneだとダサいとか。
そうした問題を解決する為に、
なるべく似通ったフォントを複数指定してあげることで
デバイス間のページの見え方の差を減らしましょうというわけです。
font-familyの書き方と挙動
font-familyの書き方について具体的に見ていきましょう。
font-family : フォント名 , 'フォント名 JP';
みたいに指定します。
フォント名に半角スペースが含まれている場合は、
シングルもしくはダブルクォーテーションで囲みます。
半角スペースがないフォントメイを囲んでも間違いでは無いので、
基本的にフォント名を囲んで指定するのがいいかもしれません。
そして、挙動としては
「左」に書いたものから順番にブラウザに「評価」されるイメージです。
左から１つずつ取り出して、取り出したフォントがデバイスにあったら、
そのフォントで表示する。
そんなイメージです。
ここで、面白いのは左側に英字のみが入っているフォントを指定すると、
英字はそのフォントを使い、日本語は別のフォントが使われるという
フォントをミックスしたような状態をつくる事もできるのです。
表現の幅が広がりますね。
そして必ず、一番右には"sans-serif"か"serif"を追記しましょう。
これは、指定したフォントがデバイス内に１つもない場合に、
このカテゴリーのフォントで表示してとざっくり指定をするものです。
「総称フォント」というものです。
sans-serifがゴシック体、serifが明朝体。を指定します。
他にも種類がありますが、この２つのどちらかを指定すれば間違いないです。
Webフォントって何？
名前の通り、web上にあるフォントです。
何が良いか？
webにあるので、どのデバイスでも同じフォントで表示できる
つまり、デバイス間の見え方の差がなくなるということです。
詳しい使い方は割愛しますが、
ざっくり解説すると
使いたいwebフォントのリンク先をHTMLもしくはCSSに記述。
そして、そのフォントをfont-familyに指定してあげれば適用完了です。
カンタンですよね。
使い方の参考ページも以下に。デジタルマーケティングブログ さんです。
Webフォントを使うことで、英字はこだわりのwebフォント、日本語はデバイス依存みたいなフォントファミリーの指定も可能になります。
１つ注意点があって、日本語のwebフォントを指定すると、
ページが重くなる可能性があります。
英字フォントの場合は
アルファベット＋記号や数字程度の文字数なので大したデータ量ではないです。
ただ、日本語フォントは、ひらがな、カタカナ、漢字、数字、記号、アルファベットなど文字数が多く、データ量も多いので読み込みに時間がかかる。
ということのようです。
これを考慮した上で使用するかどうか判断したいですね。
今日のまとめ
- フォントファミリーの指定はデザインをなるべく似通った表示にするために重要
- Webフォントが使えればデバイス間の差は気にしなくて良くなる
- 日本語Webフォントは読み込みなど遅くなりがち
フォント１つ変更するだけで、随分とページの印象が変わりますよね。
とても大事な要素だと思います。
ページの読み込み速度なんかにも気を配りながら、
コーディングしたいものです。
では、また。
