font：フォントに関する様々な機能を一括で指定する

fontプロパティの説明

fontは、フォントに関する様々な機能を一括で指定します。よく使われる機能として、フォントの大きさ、太さ、フォントファミリーの変更などがありますが、他にも色々な機能を備えています。

fontで操作できるプロパティは以下の通りです。他のショートハンド・プロパティと同様に、一括指定で省略された値は各プロパティの初期値に上書きされてしまいます。それが合理的なマークアップでない限り、複数のプロパティを使い分けた方が安全だと言えます。

• font-family：文字の種類を指定する。
• font-size：文字の大きさを指定する。
• font-stretch：文字の幅を指定する。
• font-style：筆記体や斜体で表示する。
• font-variant：字体の表示形式を指定する。
• font-weight：文字の太さを指定する。
• line-height：行間の高さを指定する。

fontを使う場合は、いくつかの規則を守らなければなりません。主に省略できない値と記述する順番に気をつける必用があります。

• font-familyとfont-sizeの値は省略できません。その他の値は任意です。
• font-style、font-variant、font-weightの値は、font-sizeの前に記述しなければなりません。
• font-variantに該当する値は、normalおよびsmall-capsだけが使えます。
• font-stretchに該当する値は、単一のキーワードのみが使えます。
• line-heightに該当する値は、font-sizeの後にスラッシュ（/）で区切って指定します。
• font-familyの値は、必ず最後に記述します。

fontに指定できる値

<'font-family'>

font-familyで指定できる値です。

<'font-style'>

font-styleで指定できる値です。

<'font-stretch'>

font-stretchで指定できる値です。

<'font-style'>

font-styleで指定できる値です。

<'font-variant'>

font-variantで指定できる値です。

<'font-weight'>

font-weightで指定できる値です。

<'line-height'>

line-heightで指定できる値です。

システムフォント値

caption

キャプション付きのコントロールに使用されるシステムフォントを有効にします。

icon

ラベルアイコンに使用されるシステムフォントを有効にします。

menu

ドロップダウンメニューやメニューリストに使用されるシステムフォントを有効にします。

message-box

ダイアログボックスに使用されるシステムフォントを有効にします。

small-caption

スモールキャピタルに使用されるシステムフォントを有効にします。

status-bar

ウィンドウのステータスバーに使用されるシステムフォントを有効にします。

その他のキーワード値

特定の環境で使用できるシステムフォントを有効にします。

fontの使い方とサンプル

fontプロパティの構文は以下の通りです。

/* 必須の値 */
font: 1rem sans-serif;
font: 24px serif;

/* 記述する順序 */
font: bold 1.8rem monospace;
font: 300 oblique 1.6rem fantasy;

/* line-heightの指定 */
font: 1.6rem / 1.5 serif;

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

fontの実例

それでは実際にfontプロパティの書き方を見ていきましょう。以下の例は、比較的よく使われる値をまとめて指定した時の挙動を表しています。

.samp_box {
	overflow: auto;
	width: 100%;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
}
#font_1 {
	font: 1rem sans-serif;
}
#font_2 {
	font: bold 1.2rem serif;
}
#font_3 {
	font: italic 1.5rem / 2 monospace;
}

<section class="samp_box">
	<h2>font</h2>
	<p id="font_1">font: 1rem sans-serif; あいうえおカキクケコ。</p>
	<p id="font_2">font: bold 1.2rem serif; あいうえおカキクケコ。</p>
	<p id="font_3">font: italic 1.5rem / 2 monospace; あいうえおカキクケコ。</p>
</section>