コーディングの勉強で、自分用にまとめたものをブログで紹介します。
今回はフォントについて書かせていただきます。

CSSでもWordなどと同じように、フォントの種類を設定することができます。
今回は、CSSでのフォントの種類の設定の仕方を解説します。

font-familyプロパティを使用する

CSSでフォントの種類を設定するには、font-familyプロパティを使用する必要があります。
また、フォント名に日本語やスペースが含まれている場合は、シングルクォーテーション「’」かダブルクォーテーション「”」で囲う必要があります。
このように指定します。

複数のフォントの候補の指定

複数のフォントの候補を指定する場合は、カンマ「,」で区切ります。
複数のフォントを設定しておくと、ブラウザは指定されたフォントの中から利用できるもので表示します。
先に記述したフォントほど優先順位が高くなります。
このように指定します。

 

また、「欧文フォント,日本語フォント」の順に記述することで、半角英数字は欧文フォントで、日本語は日本語フォントで表示することが可能です。

キーワードで指定も可能

フォントの種類を表すキーワードで指定することも可能です。
キーワードで指定することで、閲覧環境で利用できるフォントの中から最適なフォントを選んで表示します。

sans-serif：ゴシック系
serif ：明朝系
cursive ：筆記体・草書体
fantasy ：装飾的
monospace ：等幅

また、複数のフォントを指定する場合、キーワードを最後に記述することで、指定したフォントが利用できない環境で同系統のフォントで表示することが可能です。
例えばこのように指定します。

まとめ

今回はCSSでフォントの種類を指定する方法を紹介しました。
日本語フォントを指定する際は、シングルクォーテーション「’」かダブルクォーテーション「”」で囲うのを忘れないようにしましょう。