Go to information

font-size

font-sizeプロパティは文字の大きさ(フォントサイズ)を指定します。値には "em", "px" などの単位識別子を伴う数値の長さパーセンテージ値%)による割合(長さもパーセンテージ値も負の値は不正)、または絶対サイズと相対サイズの2種類のキーワードが指定できます。

初期値
medium
適用対象
すべての要素
継承
する
メディア
visual

font-sizeプロパティに指定できるキーワードには、次の絶対サイズと相対サイズの2種類あります。ただし、CSS1 の仕様と CSS2 の仕様において絶対サイズの7段階ある内の1段階大きく表示されるキーワードごとに CSS1 では1.5倍、CSS2 では1.2倍の比率となる実装が推奨されていたため、キーワードによる指定を行うと、バージョンの古い UA は1.5倍の比率で表示し、CSS2.0 に適合する UA では1.2倍の比率で表示するといったようにキーワードによる指定は UA によって文字の大きさに違いがでる問題があります。さらに Windows版Internt Explorer 6 と Macintosh版Internet Explorer 5 においてはレンダリングモードによってもサイズが異なり、標準準拠(standard)モードでは1.2倍、後方互換(quirk)モードでは1.5倍の比率で表示される実装となっています(レンダリングモードの切り替わりについては !DOCTYPE スイッチを参照ください)。

絶対サイズ指定

xx-small
超極小
x-small
極小
small
medium
標準
large
x-large
特大
xx-large
超特大

絶対サイズ指定とは直接大きさを指定する方法です。各キーワードのサイズは UA に設定されているフォントサイズの対照表を参照します。"medium" を標準サイズとして、最も小さいサイズである "xx-small" から最も大きいサイズの "xx-large" まで7つのキーワードが用意されています。CSS1 の仕様では7段階ある内の1段階大きく表示されるキーワードごとに1.5倍の比率となる実装が推奨されていましたが、CSS2 の仕様では1段階大きくなるごとに1.2倍の比率となる実装が推奨されていました。しかし、改訂版の CSS2.1 の仕様では1.5倍や1.2倍といった固定比率は推奨しないと見直され、UA は下記の h1-h6要素、および font要素との対照表を参照するように推奨されています。

CSS2.1 での絶対サイズ指定キーワードのフォントサイズ対照表
絶対サイズ xx-small x-small small medium large x-large xx-large
h1-h6要素 h6 h5 h4 h3 h2 h1
font要素 1 2 3 4 5 6 7
パーセンテージ 60% 75% 88.8% 100% 120% 150% 200% 300%

相対サイズ指定

smaller
より小さく
larger
より大きく

相対サイズ指定とは親要素のフォントサイズを基準に対する比率で指定する方法です。たとえば親要素のフォントサイズが "medium" の場合に、当該要素に "larger" を指定すると、そのフォントサイズは "large" が指定されているものとして解釈します。あるいは当該要素に "smaller" が指定すると、そのフォントサイズは "small" として解釈します。

font-sizeプロパティの実装状況

Windows版Internet Explorer
Windows版Internet Explorer 6 では絶対サイズの7段階ある内の1段階大きく表示されるキーワードごとに標準準拠(standard)モードでは1.2倍、後方互換(quirk)モードでは1.5倍の比率で表示する(Windows版Internet Explorer 7 では1.2倍の比率に固定)。
Firefox
Opera
Safari
Macintosh版Internet Explorer 5
絶対サイズの7段階ある内の1段階大きく表示されるキーワードごとに標準準拠(standard)モードでは1.2倍、後方互換(quirk)モードでは1.5倍の比率で表示する。

サンプル

記述例
ul li     { font-size : medium ; }
.xx-small { font-size : xx-small ; }
.x-small  { font-size : x-small ; }
.small    { font-size : small ; }
.large    { font-size : large ; }
.x-large  { font-size : x-large ; }
.xx-large { font-size : xx-large ; }
.larger   { font-size : larger ; }
.smaller  { font-size : smaller ; }
表示例

Windows版Internet Explorer 6 やその他バージョンの古い UA において絶対サイズ指定のキーワードや "em", "px" などの単位識別子を伴う長さによる指定は問題点が多いため、フォントサイズはパーセンテージ値以外の使用を避けた方が無難です。

現在位置
  1. W3G
  2. CSS
  3. フォント
  4. font-size
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:24:19+09:00
更新
2008-12-29T04:30:37+09:00
URI
http://w3g.jp/css/font/font-size
検索