fontプロパティは、フォント関連5つのプロパティとline-heightプロパティを一括指定できるショートハンドプロパティです。
ただ、他のショートハンドプロパティに比べて決まりごとが多く、ちょっと覚えるのが厄介です。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

[[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ]｜caption｜icon｜menu｜message-box｜small-caption｜status-bar｜inherit

初期値

個別のプロパティを参照してください

適用される要素

全ての要素

継承

します

パーセント値

font-size と line-heightプロパティのみ指定できます

メディア

visual

この値の書き方を見てもパッと見なんだか良く分かりませんが、値にはフォント関連の5つのプロパティとline-heightプロパティを空白類文字で区切って一括指定できますが、これらは一部省略不可で指定の順序が次のように決まっています。

1. <font-style>、<font-variant>、<font-weight>（順不同、省略可）
2. <font-size>（省略不可）
3. /<line-height>（値の前に半角スラッシュが必要、省略可）
4. <font-family>（省略不可）

この際、関連するプロパティは一度初期値になり、その後指定値が適用されます。
実際に書く場合は次のような感じで書きます。

body {
  font: normal normal normal small/1.6 Verdana, sans-serif;
}

システムフォントの指定

値には、システムフォントを指定する事も可能で、システムフォントを指定する場合は他の値と同時に指定する事はできません。そのため、必ず単独で指定する事になります。また、システムフォントが指定できるプロパティはfontプロパティのみでfont-familyプロパティでは指定できない点に注意して下さい。

caption

キャプションとして使用されているフォント

icon

アイコンの名前に使用されているフォント

menu

メニューで使用されているフォント

message-box

ダイヤログで使用されているフォント

small-caption

小さなツールボックスのタイトルなどに使用されているフォント

status-bar

ステータスバーに使用されているフォント

これらシステムフォントは、font-size、font-family、font-weigt、font-styleなど全ての指定が適用されます。一部だけ変更したい場合は、個別プロパティで上書きする事が可能です。
なお、指定したシステムフォントが存在しないプラットフォームでは、UA（ブラウザとか）側で適切な代替フォントを適用させるか、UAのデフォルトフォントを使用するべきとなっています。

fontのサンプル

<p class="sample01">
サンプルなテキスト。...（略）...
</p>
<p class="sample02">
サンプルなテキスト。...（略）...
</p>
<p class="sample03">
サンプルなテキスト。...（略）...
</p>

p {
  margin: 20px;
}

p.sample01 {
  font: italic normal normal x-small/1.6 Verdana, sans-serif;
}

p.sample02 {
  font: normal normal bold 1.2em/1.2 "ＭＳ 明朝", "Times New Roman", serif;
}

p.sample03 {
  font: status-bar;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

サンプルなテキスト。font-size、font-family、font-weigt、font-styleなど全ての指定が適用されます。

サンプルなテキスト。font-size、font-family、font-weigt、font-styleなど全ての指定が適用されます。

サンプルなテキスト。font-size、font-family、font-weigt、font-styleなど全ての指定が適用されます。