font
は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 font
によって直接設定できない個別指定の font-size-adjust
, font-kerning
も初期値に設定されます。
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
font
プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。
font
をシステムキーワードとして指定する場合は、 caption
, icon
, menu
, message-box
, small-caption
, status-bar
のうちの一つでなければなりません。
font
を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。
- 次の値を含めなければなりません。
- 次の値は任意で含めることができます。
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
- ラベルアイコンに使用されるシステムフォント。
- メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。
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-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
例
フォントのプロパティの設定
/* フォントの大きさを 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 }
ライブサンプル
HTML
CSS
JavaScript
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
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
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。