| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {font-size: フォント・サイズ } |
| 値 の形式 | 数値（フォント・サイズ） または キーワード （以下の解説を参照） |
| 初 期 値 | medium |
| 対応ブラウザー | C1+ / e3+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | C1+ / e3+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 継 承 | する |
font-size プロパティ は，フォントのサイズ を指定します。
フォントのサイズの指定方法には，次のようなものがあります。（CSSプロパティの値の指定方法の詳細は，CSSの解説を参照してください）
| フォント・サイズの値 | ||
|---|---|---|
| 指定方法 | 説 明 | |
| 数値で指定 | px | 数値に px の単位をつけて指定します。 px とは１ピクセルを１とする単位で，実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
|
| em | 数値に em の単位をつけて指定します。 em とは現在使用中の標準フォントの高さを１とする単位です。
|
|
| ex | 数値に ex の単位をつけて指定します。 ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。
|
|
| ％ | 親要素のフォントのサイズを基準にして割合を％値で指定します。
|
|
| キーワード で指定 |
xx-small | ７段階があり，medium が標準サイズです。 CSS2 では１段階上がると 1.2倍のサイズとされていましたが，現在はとくに比率は指定されていません。
|
x-small | ||
small | ||
medium | ||
large | ||
x-large | ||
xx-large | ||
smaller |
smaller，larger を指定すると大きさが１段階上下します。 CSS2 では 1.2倍，または，1.2分の１とされていましたが，現在はとくに比率は指定されていません。 | |
larger | ||
なお，数値には負の値は指定できません。 px 以外のものも同じ指定内容でも，ブラウザーの設定やユーザーの環境により実際の表示サイズが変化します。 これらは，それぞれ基準とするサイズに対しての相対的な指定であり，その基準とするサイズが変化した場合はそれに対応して実際のサイズが変化します。
たとえば，次のように使用できます。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
.fs1 {font-size: 12px;}
.fs2 {font-size: 2em;}
.fs3 {font-size: 2ex;}
.fs4 {font-size: 80%;}
.fs5 {font-size: 100%;}
.fs6 {font-size: 120%;}
.fs7 {font-size: xx-small;}
.fs8 {font-size: x-small;}
.fs9 {font-size: small;}
.fs10 {font-size: medium;}
.fs11 {font-size: large;}
.fs12 {font-size: x-large;}
.fs13 {font-size: xx-large;}
-->
</style> |
| HTML <body> ～ </body> |
<span class="fs1">{font-size: 12px;}のサイズ</span><br>
<span class="fs2">{font-size: 2em;}のサイズ</span><br>
<span class="fs3">{font-size: 2ex;}のサイズ</span><br>
<span class="fs4">{font-size: 80%;}のサイズ</span><br>
<span class="fs5">{font-size: 100%;}のサイズ</span><br>
<span class="fs6">{font-size: 120%;}のサイズ</span><br>
<span class="fs7">{font-size: xx-small;}のサイズ</span><br>
<span class="fs8">{font-size: x-small;}のサイズ</span><br>
<span class="fs9">{font-size: small;}のサイズ</span><br>
<span class="fs10">{font-size: medium;}のサイズ</span><br>
<span class="fs11">{font-size: large;}のサイズ</span><br>
<span class="fs12">{font-size: x-large;}のサイズ</span><br>
<span class="fs13">{font-size: xx-large;}のサイズ</span><br> |
| ブラウザー 表示例 |
|---|
| {font-size: 12px;}のサイズ {font-size: 2em;}のサイズ {font-size: 2ex;}のサイズ {font-size: 80%;}のサイズ {font-size: 100%;}のサイズ {font-size: 120%;}のサイズ {font-size: xx-small;}のサイズ {font-size: x-small;}のサイズ {font-size: small;}のサイズ {font-size: medium;}のサイズ {font-size: large;}のサイズ {font-size: x-large;}のサイズ {font-size: xx-large;}のサイズ |