font

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

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

構成要素のプロパティ

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

構文

css
/* font-size font-family */
font: 1.2em "Fira Sans", sans-serif;

/* font-size/line-height font-family */
font: 1.2em/2 "Fira Sans", sans-serif;

/* font-style font-weight font-size font-family */
font: italic bold 1.2em "Fira Sans", sans-serif;

/* font-stretch font-variant font-size font-family */
font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;

/* システムフォント */
font: caption;

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 のみ指定できます。

  • font-stretch は単一のキーワード値のみを指定することができます。

  • 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 を実装しています。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素とテキスト。 ::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 = 
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] |
<system-family-name>

<font-style> =
normal |
italic |
oblique <angle [-90deg,90deg]>?

<font-variant-css2> =
normal |
small-caps

<font-weight> =
<font-weight-absolute> |
bolder |
lighter

<font-width-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded

<font-size> =
<absolute-size> |
<relative-size> |
<length-percentage [0,∞]> |
math

<line-height> =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>

<font-family> =
[ <family-name> | <generic-family> ]#

<system-family-name> =
caption |
icon |
menu |
message-box |
small-caption |
status-bar

<font-weight-absolute> =
normal |
bold |
<number [1,1000]>

<length-percentage> =
<length> |
<percentage>

<family-name> =
<string> |
<custom-ident>+

<generic-family> =
<generic-script-specific> |
<generic-complete> |
<generic-incomplete>

<generic-script-specific> =
generic( fangsong ) |
generic( kai ) |
generic( khmer-mul ) |
generic( nastaliq )

<generic-complete> =
serif |
sans-serif |
system-ui |
cursive |
fantasy |
math |
monospace

<generic-incomplete> =
ui-serif |
ui-sans-serif |
ui-monospace |
ui-rounded

フォントのプロパティの設定

css
/* フォントの大きさを 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;
}

ライブサンプル

仕様書

Specification
CSS Fonts Module Level 4
# font-prop

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font
caption
Support for font-stretch values in shorthand
icon
menu
message-box
small-caption
status-bar

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報