CSSのfont-size指定

• サイズの継承
• emと％
• smallとlarge

サイズの継承

HTMLではHPBなどを使うとよく

<font size="5"><font size="2">Text</font></font>

なんかをやってしまう場合があるが、これを表示させると内側の設定が優先され、外側に設定したsize="5"は破棄される。ではCSSの場合はどうだろうか？次のソースを実行してみよう。

CSSの場合、ブラウザの標準モードと過去互換モードというややこしい動作が絡んでくるので、両方の場合で次のソースを検証する。なお、ブラウザの文字サイズの設定は"中"にした。CSSでフォントサイズを絶対値にすると内側が優先されるのは明らかなので、数値は相対値(通常サイズを100%とした設定)で行う。

<span style="font-size:100%;">■font-size:100%;</span><br>
<span style="font-size:80%;">■font-size:80%;</span><br>
<span style="font-size:120%;">■font-size:120%;</span><br>
<br>
<span style="font-size:100%;"><span style="font-size:80%;">■font-size:100%;-font-size:80%;</span></span><br>
<span style="font-size:100%;"><span style="font-size:120%;">■font-size:100%;-font-size:120%;</span></span><br>
<span style="font-size:80%;"><span style="font-size:120%;">■font-size:80%;-font-size:120%;</span></span><br>
<span style="font-size:120%;"><span style="font-size:80%;">■font-size:120%;-font-size:80%;</span></span><br>
<span style="font-size:80%;"><span style="font-size:80%;">■font-size:80%;-font-size:80%;</span></span><br>

• 標準モードと過去互換モードを比べる

IE6,Firefox,Opera7,Netscape7(全てWindows版)で調べると、どれも外側のCSSのサイズを継承していることが分かる。また、2つのモードでも大差はなかった。

emと％

次はサイズの単位であるemと％の違い。em単位とは、1emを通常のサイズとした相対値のことだ。0.5emは半分のサイズ。2emは2倍。%は、100%を通常のサイズとした相対値のことだ。50%は半分、200%は2倍。この2つに違いがあるのかどうか検証してみる。今回は2つのモードは無視して、過去互換モードだけで検証する。

<span style="font-size:100%;">■100%;</span>|<span style="font-size:1em;">■1em;</span><br>
<span style="font-size:70%;">■70%;</span>|<span style="font-size:0.7em;">■0.7em;</span><br>
<span style="font-size:130%;">■130%;</span>|<span style="font-size:1.3em;">■1.3em;</span><br>

• 比較する

ブラウザの文字サイズを"中"にしている方は気づかないだろうが、これを変えると変化が表示する。それを表で示してみた。

emと％"

ブラウザ名	文字サイズ"小"(-1段階)	文字サイズ"中"	文字サイズ"大"(+1段階)
MSIE6 SP1
Mozilla Firefox1.x
Opera7.x
Netscape7.x

まず違う点が2つある。 Opera7.xは、文字サイズの拡大ではなくズ−ムだ。枠の大きさも同じ縮尺で拡大される。これはいいとして、問題なのはIE。なんと文字サイズが違うとそれぞれ大きさが違う！

em指定のほうが極端に変動してしまうのだ。やってみれば分かるが、文字サイズを最小にすると小さすぎて見えない。このように他のブラウザと比べてみれば一目瞭然だが、%指定にしたほうがどのブラウザで見てもサイズの変動が小さい。結論としては、font-sizeを指定するときはemより%を使うべきだ。(ただし、em自体はfont-size以外に、widthやheightなどで利用できるので全てのemを使うなとは言わない)

smallとlarge

最後はCSSの文字サイズの単位であるsmallとlarge系についての注意点。smallとlarge系統のサイズ指定を列挙してみる。

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;

下にいくほど大きくなるのだが、実はこれ、ブラウザと表示モードによって大きさが変わる。

• 標準モードと過去互換モードを比べる

表にまとめてみた。

標準モードと過去互換モード

ブラウザ	標準モード	過去互換モード
MSIE6 SP1	1.2倍率	1.5倍率
Mozilla Firefox1.x	1.2倍率	1.2倍率
Opera7.x	1.2倍率	1.5倍率
Netscape7.x	1.2倍率	1.2倍率