過去バージョン

font プロパティとは

font プロパティは、フォントに関する複数の CSS プロパティを1 行で一括指定するためのショートハンドプロパティです。長くなりがちなフォント指定を簡潔に書けます。

記述の構文

/* 構文 */
font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

/* 最小構成 (size と family は必須) */
p { font: 16px sans-serif; }

/* フル指定 */
h1 { font: italic small-caps bold 24px/1.5 "Helvetica Neue", sans-serif; }

記述順序のルール

注意: 順序は厳密。font-size と font-family を逆にしたり、style を size の後に書くと無効になります。

各値の意味

font-style — 斜体

.a { font-style: normal; }     /* 直立 (デフォルト) */
.b { font-style: italic; }     /* イタリック */
.c { font-style: oblique; }    /* 斜体 (直立を傾けたもの) */

font-variant — 小型大文字

.a { font-variant: normal; }       /* 通常 */
.b { font-variant: small-caps; }   /* 小文字を小さな大文字で表示 */

font-weight — 太さ

font-size — サイズ

.a { font-size: 16px; }       /* 絶対指定 */
.b { font-size: 1em; }        /* 親要素の font-size に対する倍率 */
.c { font-size: 1rem; }       /* ルート (html) の font-size に対する倍率 */
.d { font-size: 100%; }       /* 親要素に対するパーセント */
.e { font-size: clamp(14px, 2vw, 20px); }   /* レスポンシブ */
.f { font-size: medium; }     /* キーワード (xx-small ... xx-large) */

line-height — 行の高さ

.a { line-height: 1.5; }      /* 単位なしが推奨 (font-size の倍率) */
.b { line-height: 24px; }     /* 絶対指定 */
.c { line-height: 150%; }     /* パーセント */
.d { line-height: normal; }   /* ブラウザ既定 */

font-family — フォント名

.a { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }

/* 左から順に試し、見つかったものを使う (フォールバック) */
/* 空白を含むフォント名は " で囲む */
/* 最後は総称ファミリ (sans-serif / serif / monospace 等) で締める */

ショートハンドの実例

/* 最小: size と family のみ */
body { font: 16px sans-serif; }

/* weight 追加 */
strong { font: bold 16px sans-serif; }

/* style + weight + size/line-height + family */
.h1 { font: italic bold 32px/1.2 "Helvetica Neue", sans-serif; }

/* 全部入り */
.h2 { font: italic small-caps bold 24px/1.5 "Helvetica Neue", sans-serif; }

ショートハンドの落とし穴 — 暗黙のリセット

ショートハンドで省略した項目は初期値にリセットされます。意図せず weight や style が戻ることがある。

.parent {
    font-weight: bold;
    font-style: italic;
}

.child {
    font: 14px sans-serif;
    /* 親から継承した bold / italic は消える! (省略値が normal にリセット) */
}

/* 個別指定なら継承を維持 */
.child-safe {
    font-size: 14px;
    font-family: sans-serif;
}

システムフォントキーワード

OS の UI で使われているフォントを一発指定できる特殊キーワード。OS のスタイルガイドに合わせた UI を作るときに便利。

button     { font: caption; }       /* ボタンのデフォルト */
.menu      { font: menu; }          /* メニュー */
.icon-text { font: icon; }          /* アイコンラベル */
.dialog    { font: message-box; }   /* ダイアログ */
.small-fnt { font: small-caption; } /* 小さなキャプション */
.statbar   { font: status-bar; }    /* ステータスバー */

実用例 — 日本語サイト向けの定番

:root {
    --font-jp: "Hiragino Kaku Gothic ProN", "Yu Gothic",
               "Noto Sans JP", Meiryo, sans-serif;
}

body {
    font: 16px/1.7 var(--font-jp);
    color: #333;
}

h1 { font: bold 32px/1.3 var(--font-jp); }
h2 { font: bold 24px/1.4 var(--font-jp); }

code, pre {
    font: 14px/1.5 "SF Mono", Consolas, "Courier New", monospace;
}

個別指定 vs ショートハンド

FAQ

Q: ショートハンドで font-stretch や font-size-adjust も指定できる？
A: できない。これらは個別指定のみ。

Q: 並び順を間違えるとどうなる？
A: ブラウザは無効値として無視。何も適用されないことが多い。

Q: line-height だけ変えたい
A: 個別指定で line-height: 1.8; と書く。ショートハンドだと他の値が初期化される。

関連プロパティ

• text-alignプロパティ — テキスト揃え
• font-family / font-size / font-weight — 個別指定
• @font-face — Web フォントの読み込み