このところずっと各ブラウザ間で差異の出ないフォントサイズの指定方法について検証していたんだけど、やっとその解らしきものを発見。
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宣言あり用なども検証してみたいと思います。
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対策が必要・・・。