CSSで font-size: 13px;
なんてすると、Internet Explore (IE)で表示サイズを変えられないという問題、ではなくて、どのブラウザにも当てはまる問題。
まず大前提として、IEのフォントサイズは、最大・大・中・小・最小の5段階を指定でき、他のブラウザ (i.e., Firefox, Safari) は、ブラウザの設定でフォントサイズを自由に指定できます。
で、本題。
各ブラウザのフォントの見え方を統一する Yahoo! UI Library: Fonts CSS 等のCSSが出回っていますが、これらのCSSは基本的に、IEは small 等を、その他ブラウザには 13px 等を設定し、見た目のサイズを統一しようとしています。
ここで問題が起こるのは、IEではないブラウザ。先ほどののブラウザのフォントサイズ設定で設定した値を無視して 13px で描画するんです。。。困りました。例えば弱視の方がフォントサイズを大きく設定しても有効にならない等のケースが考えられます。
Firefox や Safari では、ページ表示中に一時的にフォントサイズを大きくしたり、小さくしたりはできますが、結局、一時的なんですよね。新しいウィンドウやタブでページを開くと、その設定はキャンセルされて元に戻ってしまっています。
以下、表示サンプル。
CSS で font-size:13px
と設定
-
ブラウザのフォントサイズ設定が 16px の場合
-
ブラウザのフォントサイズ設定が 30px の場合
CSS で font-size:small
と設定
-
ブラウザのフォントサイズ設定が 16px の場合
-
ブラウザのフォントサイズ設定が 30px の場合
<img src="https://shinji.kawarano.net/wp-content/font-small-30.gif" alt="CSS font-size:small / ブラウザ設定 30px" /
で、はやりIE以外のことを考えても、相対指定にしておこうとなる。
ここで制作者として悩ましいのが、なぜか OSX Firefox のデフォルトフォントサイズが 14px だという事 (参照: 各ブラウザのデフォルトフォントサイズ | Bowz::Notebook)に端を発する、OSX の Firefox だけ文字が小さめになってしまうこと。結局、「まぁ、いいやｗ」と相対指定にしましたが。
関連リンク
目抜き裏通り 
![https://shinji.kawarano.net/wp-content/font-small-30.gif"](https://shinji.kawarano.net/wp-content/font-small-30.gif"){kind=link}