| 項 目 | 説 明 |
|---|---|
| 記述形式 |
|
| 値 の形式 |
|
| 初 期 値 | 各プロパティの初期値 |
| 対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | する |
font プロパティ は，フォントに関する一括指定 をします。
font-style，font-variant，font-weight， font-stretch，font-size，line-height， font-family の７つのプロパティをまとめて指定することが可能です。 これら７つのプロパティそれぞれの詳細については，各プロパティの説明を参照してください。
ただし，記述形式 1 ～ 4 では，font-size と font-family の２つのプロパティは省略できません。
また，line-height プロパティを指定する際には，font-size プロパティの後に " / " をはさんで続けて書きます。
さらに，font-variant プロパティの指定は CSS2.1 の場合のみ可能です。（CSS3 では指定不可）
| 値 | 説 明 |
|---|---|
| font-style | フォントの 立体・イタリック・斜体 などのスタイルを指定します。 |
| font-variant | スモールキャップス（small caps）を使用する時に用いますが，CSS3 では廃止の予定です。 |
| font-weight | フォントの 太さ を指定します。 |
| font-stretch | フォント幅の 拡大・縮小 を指定します。 |
| font-size | フォント幅の サイズ を指定します。 |
| line-height | 行の 高さ を指定します。 |
| font-family | フォントの 種類 を指定します。 |
| caption | キャプション付きのコントロールで使用するフォントを指定します。 |
| icon | アイコンのラベル付けに使用するフォントを指定します。 |
| menu | メニューで使用するフォントを指定します。 |
| message-box | ダイアログ・ボックスで使用するフォントを指定します。 |
| small-caption | 小さなコントロールのラベル付けに使用するフォントを指定します。 |
| status-bar | ウィンドウのステータス・バーで使用するフォントを指定します。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
.font1a1 { font: 20px Meiryo; }
.font1a2 { font: 0.8em Meiryo; }
.font1a3 { font: 2ex Meiryo; }
.font1a4 { font: 80% Meiryo; }
.font2a1 { font: italic bold 20px Meiryo; }
.font2a2 { font: italic bold 0.8em Meiryo; }
.font2a3 { font: italic bold 2ex Meiryo; }
.font2a4 { font: italic bold 80% Meiryo; }
.font3a1 { font: 20px/35px Meiryo; }
.font3a2 { font: 0.8em/2.5em Meiryo; }
.font3a3 { font: 2ex/4ex Meiryo; }
.font3a4 { font: 80%/150% Meiryo; }
.font4a1 { font: italic bold 20px/35px Meiryo; }
.font4a2 { font: italic bold 0.8em/2.5em Meiryo; }
.font4a3 { font: italic bold 2ex/4ex Meiryo; }
.font4a4 { font: italic bold 80%/150% Meiryo; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="font1a1">テキスト { font: 20px Meiryo; }</div>
<div class="font1a2">テキスト { font: 0.8em Meiryo; }</div>
<div class="font1a3">テキスト { font: 2ex Meiryo; }</div>
<div class="font1a4">テキスト { font: 80% Meiryo; }</div>
<br />
<div class="font3a1">テキスト { font: 20px/35px Meiryo; }</div>
<div class="font3a2">テキスト { font: 0.8em/2.5em Meiryo; }</div>
<div class="font3a3">テキスト { font: 2ex/4ex Meiryo; }</div>
<div class="font3a4">テキスト { font: 80%/150% Meiryo; }</div>
<br />
<div class="font2a1">テキスト { font: italic bold 20px Meiryo; }</div>
<div class="font2a2">テキスト { font: italic bold 0.8em Meiryo; }</div>
<div class="font2a3">テキスト { font: italic bold 2ex Meiryo; }</div>
<div class="font2a4">テキスト { font: italic bold 80% Meiryo; }</div>
<br />
<div class="font4a1">テキスト { font: italic bold 20px/35px Meiryo; }</div>
<div class="font4a2">テキスト { font: italic bold 0.8em/2.5em Meiryo; }</div>
<div class="font4a3">テキスト { font: italic bold 2ex/4ex Meiryo; }</div>
<div class="font4a4">テキスト { font: italic bold 80%/150% Meiryo; }</div>
<br /> |
| ブラウザー 表示例 （文字に色は付きません） |
|---|
| テキスト { font: 20px Meiryo; }
テキスト { font: 0.8em Meiryo; }
テキスト { font: 2ex Meiryo; }
テキスト { font: 80% Meiryo; }
テキスト { font: 20px/35px Meiryo; }
テキスト { font: 0.8em/2.5em Meiryo; }
テキスト { font: 2ex/4ex Meiryo; }
テキスト { font: 80%/150% Meiryo; }
テキスト { font: italic bold 20px Meiryo; }
テキスト { font: italic bold 0.8em Meiryo; }
テキスト { font: italic bold 2ex Meiryo; }
テキスト { font: italic bold 80% Meiryo; }
テキスト { font: italic bold 20px/35px Meiryo; }
テキスト { font: italic bold 0.8em/2.5em Meiryo; }
テキスト { font: italic bold 2ex/4ex Meiryo; }
テキスト { font: italic bold 80%/150% Meiryo; }
|