font-family

名前:font-family
: [ <family-name> | <generic-family> ] #
初期値:UAに依存
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual(視覚的)
計算値:As specified(指定通り)
正規順序:per grammar(文法ごと)
アニメーション:できない

font-family は、書体(フォント)を指定する時に使います。 family-name(ファミリー名)と generic-family(総称ファミリー)により指定します。複数指定する時は、カンマ(,)で区切って指定します。 先に指定したフォントから順に表示され、見る側の環境に指定したフォントが用意されていない場合は、UA に依存することになります。

Value(値)

<family-name>
フォント名にスペース(空白)が含まれる場合は、 シングルクォーテーション(')やダブルクォーテーション(")で括る必要があります。
<generic-family>
よく似たフォントの集まりで、キーワードには「serif」「sans-serif」「cursive」「fantasy」「monospace」があります。 最後の代替手段として generic-family を指定することが推奨されています。指定の際、キーワードは引用符で括らないようにします。

keywords(キーワード)

serif
明朝体。文字の線の先に小さな髭のような飾り(セリフ)がついている書体。
MS PMinchoTimesなど。
sans-serif
ゴシック体。セリフのない書体。
MeiryoVerdanaなど。
cursive
筆記体。ペンやブラシを使って手書きされたような書体。
HGGyoshotaiHGP行書体など。
fantasy
装飾的または表現的な書体。
Comic Sans MSHGPSoeiKakupoptaiなど。
monospace
全てのグリフが同じ固定幅をもつ書体。等幅。
CourierOsaka-等幅など。
inherit
親要素の値を継承します。

上に戻る

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { font-family: serif; }
   p.test2 { font-family: sans-serif; }
   p.test3 { font-family: cursive; }
   p.test4 { font-family: fantasy; }
   p.test5 { font-family: monospace; }
   p.test6 { font-family: 'MS 明朝', monospace; }
   p.test7 { font-family: "MS ゴシック", "MS 明朝"; }
   p.test8 { font-family: "Times New Roman"; }
  </style>
 </head>
 <body>
   <p class="test1">serif</p>
   <p class="test2">sans-serif</p>
   <p class="test3">cursive</p>
   <p class="test4">fantasy</p>
   <p class="test5">monospace</p>
   <p class="test6">MS 明朝、monospace</p>
   <p class="test7">MS ゴシック、MS 明朝</p>
   <p class="test8">Times New Roman</p>
 </body>
</html>

display

serif

sans-serif

cursive

fantasy

monospace

MS 明朝、monospace

MS ゴシック、MS 明朝

Times New Roman

上に戻る