フォントサイズ指定方法の検証

このところずっと各ブラウザ間で差異の出ないフォントサイズの指定方法について検証していたんだけど、やっとその解らしきものを発見。

13px基準の場合、まずデフォルトのcssに、

body {
    font-size: 13px;
    *font-size: 81.25%; /*for IE6,IE7*/
}

と記述。
これに対して以下の範囲の%値でfont-sizeを指定。

表示したいサイズ(px) 指定する値(%)
10px 77?80%
11px 85?88%
12px 93?96%
13px 100?103%
14px 108?111%
15px 116?119%
16px 124?126%
17px 131?134%
18px 139?142%
19px 147?149%
20px 154?157%
21px 162?165%
22px 170?173%
23px 177?180%
24px 185?188%
25px 193?196%
26px 200%
※検証環境
Windows: IE6, IE7, Firefox2, Opera9, Safari3b
Mac: Safari2, Firefox2, Opera9
XML宣言なし、標準準拠モード、utf-8
font-family指定なし

これできれいに揃うはず。揃いませんでしたすみません!(↓追記あり)

検証に使ったHTMLファイルはこちら(Win/Firefox2を基準に作成。フォントサイズが変わるところにhrを入れてpx指定のテキストを並べた。比較しやすいように右寄せに。このファイルを各ブラウザで表示させて検証)。

お気づきのようにYahoo! UI Libraryfonts.cssをもとに作成してます。

たとえばYUIでは12pxは92%となっているけど、これは93%でないとOperaで1サイズ小さく表示されてしまいます。最初は*font-size:smallで検証していたんですが、IE、Opera共に、%で指定するとFirefoxとはサイズがずれているんだけど、ずれ方が違っていて、18px相当以上では共通する%指定値がなくなりました。
そこで、smallの部分を81.25%と指定(13px/16px(IEのデフォルトフォントサイズ)=0.8125)。すると、IEはほとんどFirefoxと同じような表示になりました。Operaは相変わらずずれたままだけど、同じフォントサイズになる%値ができたのでOK。
このあたりは、欧文フォントの指定にも関係しているのかもしれません。なので、font-familyの指定によってはうまくいかないかも。(実際IEでおかしなことになりました。この話はまた今度。)

YUIではほかにもtextareaとかpre用の記述があるけど、今回は無視。あと、「*font: x-small;」も互換モード用ハックということで省略。
引き続き16px基準とか、XML宣言あり用なども検証してみたいと思います。

参考サイト:
TRANS – 【解決編】YUI Fonts CSSをモダンブラウザで最適化する。
フォントサイズに関するCSSハック – Go my way

2007/07/12 13:10 追記

IEでおかしくなった件、このファイルでもおかしくなってた・・・。
UTF-8だと日本語フォントの11pxが表示されないっぽいです。
MS P ゴシックを指定すればとりあえず解決します。
なんで見逃したんだろ><。

2007/07/12 21:24 追記

この条件ではfont-familyにMS PゴシックかMS P明朝を指定しないとWindowsIEで11pxが12pxで表示されます。
あとはShift_JISかEUC-JPにすればfont-familyを指定しなくても揃うはず。
もうちょっとIE対策が必要・・・。