CSS3

プロパティ

font-family

→●、mdn

フォント ファミリー。

このプロパティは、いくつかの［フォント ファミリー名や汎用ファミリー名］からなる、優先順位付けられたリストを指定する。フォント ファミリーは、様々な［ウェイト、字幅、斜傾度］を備える書体の集合を定義する。CSS は、個々の書体を選定するために、ファミリー名と他の一連のスタイル属性の組み合せを利用する。デザイン アプリケーションにおいて よく行われる様な［スタイル名を介する書体の選定法］ではなく、この選定の仕組みにより、フォールバックが生じた際でも、ある程度 規則正しいテキストな表示を得られるようになる。

注記： デザイナ達は、CSS による［選定に利用されるフォント属性］の定義が、［明示的に、フォントの分類法を定義することは意図していない］ことを心に留めておくべきである。活字デザイナによるファミリーのアイデアは、標準の［ウェイト、字幅、斜傾度］の軸のみならず、他の軸にも沿って変わり得るような、書体の集合まで拡張することが多い。ファミリーは、セリフ体の集合とサンセリフ体の集合の両者を含むように、あるいは そのファミリーに固有の軸に沿って変わり得るように、拡張し得る。CSS におけるフォント選定の仕組みは、単に、代用が必要とされるときに“最も近い”代用を決定するための、一つの方法を供するものに過ぎない。

他の CSS プロパティと異なり、リストの成分値はカンマで分離される。それらは、一連の代替候補を指示する。ユーザー エージェントは、［［描画される文字用のグリフ］を包含するような、可用なフォント ］に合致するまで、ファミリー名のリストを走査する。これにより、［プラットフォームに渡る、可用なフォントの相違］、および［個々のフォントがサポートする文字範囲の相違］が、許容されるようになる。

<family-name>

Helvetica や Verdana など、候補とされるフォント ファミリーの名前。

<SPAN style="
 font-family:Arial,ＭＳ 明朝;
 font-size:30px;
">ABCabcijk012漢字あいう</SPAN>

Arialに無いフォントはＭＳ 明朝でおぎなう

<SPAN style="
 font-family:メイリオ,ＭＳ 明朝;
 font-size:30px;
">ABCabcijk012漢字あいう</SPAN>

メイリオに無いフォントはＭＳ 明朝でおぎなう

<generic-family>

次に定義される、汎用ファミリー キーワード ：

serif、sans-serif、cursive、fantasy、monospace

これらのキーワードは、作者が欲するフォント候補が可用でないときの、一般フォールバックの仕組みとして利用できるものである。キーワードなので、引用符で括られてはならない。作者には、堅牢性を向上するため、最後の代替候補として汎用フォント ファミリーを付加しておくことが奨励される。

serif ●

<SPAN style="
 font-family:serif, ＭＳ ゴシック;
 font-size:30px;
">ABCabcijk012*\漢字あいう</SPAN>

sans-serif ●

<SPAN style="
 font-family:sans-serif, ＭＳ 明朝;
 font-size:30px;
">ABCabcijk012*\漢字あいう</SPAN>

cursive ●

<SPAN style="
 font-family:cursive, ＭＳ 明朝;
 font-size:30px;
">ABCabcijk012*\漢字あいう</SPAN>

漢字には対応していないようだ

fantasy ●

<SPAN style="
 font-family:fantasy, ＭＳ 明朝;
 font-size:30px;
">ABCabcijk012*\漢字あいう</SPAN>

漢字には対応していないようだ

monospace ●

<SPAN style="
 font-family:monospace;
 font-size:30px;
">ABCabcijk012*\漢字あいう</SPAN>

<family-name> によるフォント ファミリー名は、CSS 文字列として、引用符で括った上で与えるか、または［1 個以上の CSS 識別子が成す連列］として、引用符で括らずに与えなければならない。従って、引用符で括らない場合、各トークンの先頭にある［約物のほとんど／数字］は、エスケープされなければならない。

body { font-family: "New Century Schoolbook", serif }

body {
    font-family: Helvetica, Verdana, sans-serif;
}

Helvetica が可用ならば、それが描画時に利用されることになる。Helvetica も Verdana も無い場合、ユーザー エージェント定義なサンセリフ フォントが利用されることになる。

テスト