font
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プロパティを空白類文字で区切って一括指定できますが、これらは一部省略不可で指定の順序が次のように決まっています。
- <font-style>、<font-variant>、<font-weight>(順不同、省略可)
- <font-size>(省略不可)
- /<line-height>(値の前に半角スラッシュが必要、省略可)
- <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 "MS 明朝", "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など全ての指定が適用されます。