ブラウザ間のフォントサイズの統一

Yahoo!開発チームが検証した指定方法でブラウザ間のフォントサイズを統一できる。

以下の指定で基準フォントサイズが100%=13pxとなる。

body {
font: 13px;
*font-size: small;
*font: x-small;
}

 最初に Firefox、Safari、Opera等モダンブラウザやMac IE5に適用。
 「*」ハックによりWin IE7およびWin IE6標準準拠モードに上書き適用
 さらにWin IE 5-5.5、6(後方互換モード)に適用。

以下、フォントサイズにあわせて%指定する。

10px 77%
11px 85%
12px 93%
13px 100%
14px 108%
15px 116%
16px 123.1%
17px 131%
18px 138.5%
19px 146.5%
20px 153.9%
21px 161.6%
22px 167%
23px 174%
24px 182%
25px 189%
26px 197%

親要素、子要素で%指定がかぶると、思ったようなフォントサイズに表示されないので注意

コーディングに関する記事

コメント