概要

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

他のショートハンド・プロパティ同様、値を指定しなかった場合には、それぞれの初期値が設定されます。結果的に、それ以前にショートハンドでないプロパティを使って指定していた値は上書きされます。

注意: font ショートハンドを使うときには、注意しなければならない点が若干あります。以下の条件を満たさない場合、そのプロパティは無効とされ、完全に無視されます。
  • キーワードを使う場合を除いて、必ず font-size プロパティと font-family プロパティの値を両方とも定義しなければなりません。
  • font-variant については、すべての値を使うことができるわけではありません。CSS 2.1 で定義された値、すなわち normalsmall-caps のみを使うことができます。
  • font によって直接指定できるわけではありませんが、font-stretch, font-size-adjust, font-kerning の値もそれぞれの初期値にリセットされます。
  • 値の順番は完全に自由というわけではありません。まず、font-style, font-variant, font-weight を定義するときには、font-size の値よりも前で定義しなければなりません。また、line-height の値は、font-size の直後で / に続けて、定義しなければなりません。最後に、font-family は必須であり、一連の定義される値の中で、最後の値でなければなりません(inherit 値は動作しません)。

初期値以下の各プロパティのショートハンドとして補完します:
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
相対値の基準以下の各プロパティのショートハンドとして補完します:
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
  • 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: 指定値
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
正規順序order of appearance in the formal grammar of the values

構文

/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;

/* システムダイアログで使用するフォント */
font: message-box;
font: icon;

/* グローバル値 */
font: inherit;
font: initial;
font: unset;

<'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
通常のプロパティを指定する方法以外に、キーワードを用いることで、特定のシステムフォントで代替させることもできます。
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 }
/* フォントの太さを bold、フォントスタイルを italic、フォントサイズを 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 の定義
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
ショートハンド 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
システムフォント 1.0 1.0 (1.0) 4.0 6.0 1.0 (85)
font-stretch の値をサポート (有) 43 (43) ? ? ?
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本的なサポート ? ? ? ? ?
font-stretch の値をサポート ? 43 (43) ? ? ?

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

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