フォントを指定する
font-family
{
font-family
font-familyプロパティは、フォントを指定します。指定したフォントが閲覧者の環境にない場合は、ブラウザーで設定された標準のフォント(システムフォント)が表示されます。
初期値 | ブラウザーに依存 |
---|---|
継承 | あり |
適用される要素 | すべての要素 |
モジュール | CSS Fonts Module Level 3 |
値の指定方法
フォント名
フォント名 | フォントファミリーの名称を指定します。カンマ(,)で区切って複数のフォントを指定でき、閲覧者の環境に用意された最初のフォントで表示されます。フォント名にスペースが含まれる場合は、"MS 明朝"のように引用符(")で囲む必要があります。スペースが含まれない場合に引用符で囲っても問題ありません。 |
---|
一般フォント名
フォント名の値で指定したフォントが閲覧者の環境にない場合、ブラウザーのシステムフォントから以下の書体に対応するフォントで表示されます。
serif | 英字にひげ飾り(serif)があるフォント。日本語では明朝系のフォントに当たる。 |
---|---|
sansserif | ひげ飾りがないフォント。日本語ではゴシック系のフォントに当たる。 |
cursive | 筆記体のフォント。日本語では草書 行書体のフォントに当たる。 |
fantasy | 装飾的、表現的なフォント。 |
monospace | すべての文字が同じ幅(等幅)のフォント。 |
サンプルコード
以下の例では、body要素内の文字についてWindowsなら「メイリオ」(Meiryo)、Macなら「ヒラギノ角ゴ ProN W3」(Hiragino Kaku Gothic ProN)、該当するフォントがない場合はゴシック系のシステムフォントで表示するように指定しています。
body { font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Sans-Serif; }