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

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

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 Libraryのfonts.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対策が必要・・・。