トップページの中の プロパティの中の Fのプロパティ一覧の中の font

font

  • 最終更新:2010年1月15日 19:52

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

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

[[ <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 "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など全ての指定が適用されます。

このページの上部へ