font-family

概要

CSS の font-family プロパティを使うと、選択した要素に対して、フォントファミリー名と総称ファミリー名の両方、もしくはどちらか一方の優先順位リストを指定することができます。他のほとんどの CSS プロパティと異なり、各値が選択肢であることを示すには、それぞれをコンマで区切ります。ブラウザが選択するのは、コンピュータにインストール済み、もしくは @font-face @ 規則によって与えられる情報を使ってダウンロード可能な、リストの中で最上位のフォントです。

Web 製作者は、font-family リストの中に、総称ファミリーを少なくとも 1 つ、常に追加しておくべきです。指定したフォントが常にコンピュータにインストールされているとは限りませんし、@font-face @ 規則を使ってダウンロードできるとも限らないからです。総称ファミリーを使うことで、必要ならば、ブラウザに受け付け可能な代替フォントを選択させることができます。

font-size やその他のフォント関連プロパティを一度に設定するには、ショートハンドプロパティ font を使うと便利です。

構文

/* フォントファミリー名および総称ファミリー名 */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* 総称ファミリー名のみ */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;

/* グローバル値 */
font-family: inherit;
font-family: inherit;
font-family: unset;

値

<family-name>

フォントファミリーの名称。例えば、"Times" や "Helvetica" はフォントファミリーです。空白を含むフォントファミリー名は、引用符で囲む必要があります。

<generic-name>

総称フォントファミリーは代替メカニズムです。このメカニズムによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリー名はキーワードであり、引用符で囲んではいけません。総称フォントファミリーは、フォントファミリー名リストの最終選択肢である必要があります。以下のキーワードが定義されています:

serif

グリフには仕上げのストロークがあり、張り出しているか、細長い先端を持ちます。つまり、実際のセリフ活字のような先端を持っています。
例: Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif

sans-serif

グリフは、装飾付けされていないストロークの端を持ちます。
例: "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif

monospace

すべてのグリフは等幅です。
例: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace

cursive

草書体フォントのグリフには、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の草書体の特性があります。グリフは、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。
例: "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive

fantasy

fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。
例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy

妥当なファミリー名

フォントファミリー名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリー名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。また、フォントファミリー名に半角スペースが含まれる場合は引用符で括る必要があります。

例えば、以下の宣言は妥当です:

font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

以下の宣言は 無効 です:

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

形式文法

[ <family-name> | <generic-family> ]#
where 
<family-name> = <string> | <IDENT>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

例

例 1

body {
  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}

.receipt {
  font-family: Courier, "Lucida Console", monospace;
}

例 2

.exampleserif {
    font-family: Times, "Times New Roman", Georgia, serif;
}

.examplesansserif {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.examplemonospace {
    font-family: "Lucida Console", Courier, monospace;
}

.examplecursive {
    font-family: cursive;
}

.examplefantasy {
    font-family: fantasy;
}

<div class="exampleserif">
This is an example of a serif font.
</div>

<div class="examplesansserif">
This is an example of a sans-serif font.
</div>

<div class="examplemonospace">
This is an example of a monospace font.
</div>

<div class="examplecursive">
This is an example of a cursive font.
</div>

<div class="examplefantasy">
This is an example of a fantasy font.
</div>

Live Sample

仕様

ブラウザ実装状況