fontプロパティの説明
CSSの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-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- ウィンドウのステータスバーに使用されるシステムフォントを有効にします。
keyword値- 特定の環境で使用できるシステムフォントを有効にします。
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プロパティの書き方を見ていきましょう。以下の例は、比較的よく使われる値をまとめて指定した時の挙動を表しています。
<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>
.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;
}