CSS の font プロパティは、 font-style, font-variant, font-weight, font-size, line-height, and font-family の一括指定プロパティです。また、特定のキーワードを用いることで、要素のフォントにシステムフォントを指定することもできます。

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

構文

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 のみ指定できます
  • 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
The system font used to label icons.
メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。
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 }

ライブサンプル

仕様策定状況

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

初期値一括指定の各プロパティとして
適用対象すべての要素。 ::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: 指定値
アニメーションの種類一括指定の各プロパティとして
正規順序形式文法における値の出現順

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112133.51
System fonts1121461
Support for font-stretch values あり ?43 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
System fonts ? ? ? ? ? ? ?
Support for font-stretch values ? ? ?43 ? ? ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, fscholz, Sebastianz, ethertank, Amigomr, Kohei
最終更新者: mfuji09,