[ CSS ] フォントサイズを統一＆サイズ変更できる指定方法

本文を 12 ピクセル相当の大きさで表示すべく、font-size:75%; で指定されたページを Mac Firefox 2.0 で見ると文字が小さく見えます。

これは、Mac Firefox 2.0 のデフォルトフォントサイズが 14 ピクセルの為で、計算してみると 10.5 ピクセル相当の大きさでレンダリングされている事になります。

14px * 75% = 10.5px

確かに小さいですねー。

この問題を解決すべく、各ブラウザで同じフォントサイズを実現するには、font-size:12px; とかのピクセル指定すれば良いだけなんですが、Windows Internet Explorer 7 で文字のサイズ変更が出来なくなってしまうのでピクセル指定はアウト。

と言う事で、やりたい事

• 各ブラウザで同じフォントサイズを実現する。
• Windows Internet Explorer 7 で文字のサイズを変更できるようにする。

こんな感じで、色々調べてみました。

CSS の設定方法

body {
  font-size: 75%; /* IE */
}
html>/**/body {
  font-size: 12px; /* Except IE */
}

サンプル

後方互換モードの事はあまり考えていません。ゴメンナサイ。

参考にさせていただいたページ

• フォントサイズに関するCSSハック – Go my way
• 続フォントサイズ指定手法 ? NOTE

ありがとうございます。

ちなみに、Mac Safari 2.0 のデフォルトフォントサイズは 16 ピクセルなんですが、等幅フォントの時は 13 ピクセルになってるんですよねー。なんでだろ？