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 PMincho、Timesなど。
sans-serif
ゴシック体。セリフのない書体。
Meiryo、Verdanaなど。
cursive
筆記体。ペンやブラシを使って手書きされたような書体。
HGGyoshotai、HGP行書体など。
fantasy
装飾的または表現的な書体。
Comic Sans MS、HGPSoeiKakupoptaiなど。
monospace
全てのグリフが同じ固定幅をもつ書体。等幅。
Courier、Osaka-等幅など。
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: 'ＭＳ 明朝', monospace; }
   p.test7 { font-family: "ＭＳ ゴシック", "ＭＳ 明朝"; }
   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">ＭＳ 明朝、monospace</p>
   <p class="test7">ＭＳ ゴシック、ＭＳ 明朝</p>
   <p class="test8">Times New Roman</p>
 </body>
</html>

display

serif

sans-serif

cursive

fantasy

monospace

ＭＳ 明朝、monospace

ＭＳ ゴシック、ＭＳ 明朝

Times New Roman

上に戻る