[ 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 */
}

サンプル

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

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

ありがとうございます。

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

3 Comments

パソコンと家電の豆知識

フォントサイズをcssで指定する

 cssでフォントサイズの指定をする場合の設定項目をまとめてみました。絶対サイズ指定xx-small:とても小さいx-small:小さいsmall:やや小さいmedium:通常サイズlarge:やや大きいx-large:大…

コメントを残す

メールアドレスが公開されることはありません。