font

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

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

構成要素のプロパティ

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

構文

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

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

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

次の値を含めなければなりません。
- <font-size>
- <font-family>
次の値は任意で含めることができます。
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`: `normal` `font-variant`: `normal` `font-weight`: `normal` `font-stretch`: `normal` `font-size`: `medium` `line-height`: `normal` `font-family`: ユーザエージェントに依存
適用対象	すべての要素。 `::first-letter`および`::first-line` にも適用されます。
継承	あり
パーセント値	一括指定の次の各プロパティとして `font-size`: 親要素の font-size に対する相対値 `line-height`: 要素自身のフォントサイズに対する相対値
計算値	一括指定の次の各プロパティとして `font-style`: 指定通り `font-variant`: 指定通り `font-weight`: 指定された通りのキーワードまたは数値であり、 `bolder` および `lighter` は実数に変換される `font-stretch`: 指定通り `font-size`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される `line-height`: パーセンテージか length を指定すると絶対的な値、それ以外は指定通り `font-family`: 指定通り
アニメーションの種類	一括指定の次の各プロパティとして `font-style`: 離散値 `font-variant`: 離散値 `font-weight`: フォントの太さ `font-stretch`: フォントの伸長値 `font-size`: length `line-height`: 数値または長さ `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ここで
<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