font

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

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

構成要素のプロパティ

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

構文

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

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

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

  • 次の値を含めなければなりません。
  • 次の値は任意で含めることができます。
  • font-style, font-variant, font-weightfont-size よりも前になければなりません
  • font-variant は CSS 2.1 で定義された値、つまり normal 及び small-caps のみ指定できます
  • font-stretch は単一のキーワード値のみを指定することができます
  • line-heightfont-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
ラベルアイコンに使用されるシステムフォント。
メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。
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 を実装しています。

公式定義

初期値一括指定の各プロパティとして
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
パーセンテージ一括指定の各プロパティとして
計算値一括指定の各プロパティとして
  • font-style: 指定値
  • font-variant: 指定値
  • font-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
  • font-stretch: 指定値
  • font-size: 指定通り。ただし相対的 length は絶対的 length に変換
  • line-height: パーセンテージか length を指定すると絶対的な値、それ以外は指定通り
  • font-family: 指定値
アニメーションの種類一括指定の各プロパティとして

形式文法

[ [ <'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 }

ライブサンプル

仕様書

仕様書 状態 備考
CSS Fonts Module Level 3
font の定義
勧告候補 font-stretch の値の対応を追加
CSS Level 2 (Revision 1)
font-weight の定義
勧告 キーワードへのサポートが追加されました
CSS Level 1
font の定義
勧告 初回定義。

ブラウザーの互換性

BCD tables only load in the browser