CSS の font プロパティは、 font-style, font-variant, font-weight, font-size, line-height, 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
ラベルアイコンに使用されるシステムフォント。
メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。
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: 指定値
アニメーションの種類一括指定の各プロパティとして
正規順序形式文法における値の出現順

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
System fontsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 6Safari 完全対応 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Support for font-stretch valuesChrome 完全対応 ありEdge ? Firefox 完全対応 43IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 43Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

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

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