font

font は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。

他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 font によって直接設定できない個別指定の font-size-adjust, font-kerning も初期値に設定されます。

このプロパティは以下の CSS プロパティの一括指定です。

• font-family
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• line-height

font プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。

font をシステムキーワードとして指定する場合は、 caption, icon, menu, message-box, small-caption, status-bar のうちの一つでなければなりません。

font を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。

• 次の値を含めなければなりません。
  • <font-size>
  • <font-family>
• 次の値は任意で含めることができます。
  • <font-style>
  • <font-variant>
  • <font-weight>
  • <font-stretch>
  • <line-height>
• font-style, font-variant, font-weight は font-size よりも前になければなりません
• font-variant は CSS 2.1 で定義された値、つまり normal 及び small-caps のみ指定できます
• font-stretch は単一のキーワード値のみを指定することができます
• line-height は font-size の直後に、 "/" で区切って、 "16px/3" のように指定します
• font-family は指定される最後の値である必要があります。

<'font-style'>

font-style プロパティを参照。

<'font-variant'>

font-variant プロパティを参照。

<'font-weight'>

font-weight プロパティを参照。

<'font-stretch'>

font-stretch プロパティを参照。

<'font-size'>

font-size プロパティを参照。

<'line-height'>

line-height プロパティを参照。

<'font-family'>

font-family プロパティを参照。

システムフォント値

caption

キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。

icon

ラベルアイコンに使用されるシステムフォント。

menu

メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。

message-box

ダイアログボックスに使われるシステムフォント。

small-caption

小さいコントロールのラベルに使われるシステムフォント。

status-bar

ウィンドウのステータスバーに使われるシステムフォント。

接頭辞付きのシステムフォントキーワード

ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, -moz-field を実装しています。

[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
where 
<font-variant-css21> = [ normal | small-caps ]

/* フォントの大きさを 12px に設定し、行の高さを 14px にする。
   フォントファミリは sans-serif に設定する */
p { font: 12px/14px sans-serif }

/* フォントの大きさを親要素の 80% または既定値
   (親要素がない場合) に設定する。
   フォントファミリは sans-serif に設定する */
p { font: 80% sans-serif }

/* フォントの太さを太字に、
   フォントスタイルを斜体に、
   フォントの大きさを large に、
   フォントファミリーは serif に設定する */
p { font: bold italic large serif }

/* ウィンドウのステータスバーと同じフォントに設定する */
p { font: status-bar }