| 属性名 | font |
|---|---|
| 値 | <font> | <system-font> |
| 値の詳細 |
<font> = [ <style> || <variant> || <weight> || <stretch> ]? <size> [ / <height> ]? <family>
<system-font> = caption | icon | menu | message-box | small-caption | status-bar
|
| 初期値 | 個々の要素を参照 |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| メディア | visual |
| アニメーション | 個々の要素を参照 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari | |
|---|---|---|---|---|---|---|
| 基本 | CSS1 | 3 | 1 | 1 | 3.5 | 1 |
| <system-font> | CSS2.1 | 4 | 1 | 1 | 6 | 1 |
| <stretch> | CSS2.1 | 9 | 9 | ? | ? | ? |
フォントのスタイル、変換、太さ、サイズ、表示高さ、ファミリをまとめて指定します。
| 値 | 説明 |
|---|---|
| <style> | フォントスタイルを指定します。font-styleを参照してください。 |
| <variant> | フォントの変換を指定します。font-variantを参照してください。normal と small-caps のみが指定可能です。 |
| <weight> | フォントの太さを指定します。font-weightを参照してください。 |
| <stretch> | フォントの横幅を指定します。font-stretchを参照してください。 |
| <size> | フォントサイズを指定します。font-sizeを参照してください。 |
| <height> | フォントの高さを指定します。line-heightを参照してください。 |
| <family> | フォントファミリを指定します。font-familyを参照してください。 |
| caption | ボタンやドロップダウンなどのキャプションコントロールで使用されているフォント |
| icon | ラベルアイコンに使用されているフォント |
| menu | メニューで使用されているフォント |
| message-box | ダイアログボックスで使用されているフォント |
| small-caption | スモールコントロールで使用されているフォント |
| status-bar | ステータスバーで使用されているフォント |
システムフォント以外を指定する場合、最低限 <size> と <family> が必須となります。
.sample { font: 100% Arial; }
行の高さは、<size> の後に /<height> で指定します。
.sample { font: 100% / 1.5em Arial; }
<size> の前に、<style>, <variant>, <weight> を順不同で複数追加できます。
.sample1 { font: italic 100% Arial; }
.sample2 { font: italic small-caps 100% Arial; }
.sample3 { font: italic small-caps bold 100% Arial; }
message-box など、いくつかのシステムフォントを利用できます。
.sample { font: message-box; }
<table> <tr><td style="width:150px;">通常</td><td>謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>130% Arial</td><td style="font: 130% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>100% fantasy</td><td style="font: 100% fantasy">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>100%/200% Arial</td><td style="font: 100%/200% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>italic 100% Arial</td><td style="font: italic 100% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>small-caps 100% Arial</td><td style="font: small-caps 100% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>bold 100% Arial</td><td style="font: bold 100% Arial">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>caption</td><td style="font: caption">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>icon</td><td style="font: icon">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>menu</td><td style="font: menu">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>message-box</td><td style="font: message-box">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>small-caption</td><td style="font: small-caption">謹賀新年 / おめでとう / Happy New Year.</td></tr> <tr><td>status-bar</td><td style="font: status-bar">謹賀新年 / おめでとう / Happy New Year.</td></tr> </table>
| 通常 | 謹賀新年 / おめでとう / Happy New Year. |
| 130% Arial | 謹賀新年 / おめでとう / Happy New Year. |
| 100% fantasy | 謹賀新年 / おめでとう / Happy New Year. |
| 100%/200% Arial | 謹賀新年 / おめでとう / Happy New Year. |
| italic 100% Arial | 謹賀新年 / おめでとう / Happy New Year. |
| small-caps 100% Arial | 謹賀新年 / おめでとう / Happy New Year. |
| bold 100% Arial | 謹賀新年 / おめでとう / Happy New Year. |
| caption | 謹賀新年 / おめでとう / Happy New Year. |
| icon | 謹賀新年 / おめでとう / Happy New Year. |
| menu | 謹賀新年 / おめでとう / Happy New Year. |
| message-box | 謹賀新年 / おめでとう / Happy New Year. |
| small-caption | 謹賀新年 / おめでとう / Happy New Year. |
| status-bar | 謹賀新年 / おめでとう / Happy New Year. |