CSSでフォントサイズを固定すると、ブラウザのフォントサイズ設定が無効になる

CSSで font-size: 13px; なんてすると、Internet Explore (IE)で表示サイズを変えられないという問題、ではなくて、どのブラウザにも当てはまる問題。

まず大前提として、IEのフォントサイズは、最大・大・中・小・最小の5段階を指定でき、他のブラウザ (i.e., Firefox, Safari) は、ブラウザの設定でフォントサイズを自由に指定できます。

Firefox の フォントサイズ設定ダイアログ

で、本題。

各ブラウザのフォントの見え方を統一する Yahoo! UI Library: Fonts CSS 等のCSSが出回っていますが、これらのCSSは基本的に、IEは small 等を、その他ブラウザには 13px 等を設定し、見た目のサイズを統一しようとしています。

ここで問題が起こるのは、IEではないブラウザ。先ほどののブラウザのフォントサイズ設定で設定した値を無視して 13px で描画するんです。。。困りました。例えば弱視の方がフォントサイズを大きく設定しても有効にならない等のケースが考えられます。

Firefox や Safari では、ページ表示中に一時的にフォントサイズを大きくしたり、小さくしたりはできますが、結局、一時的なんですよね。新しいウィンドウやタブでページを開くと、その設定はキャンセルされて元に戻ってしまっています。

以下、表示サンプル。

CSS で font-size:13px と設定

  • ブラウザのフォントサイズ設定が 16px の場合
    CSS 13px / ブラウザ設定 16px
  • ブラウザのフォントサイズ設定が 30px の場合
    CSS 13px / ブラウザ設定 30px

CSS で font-size:small と設定

で、はやりIE以外のことを考えても、相対指定にしておこうとなる。

ここで制作者として悩ましいのが、なぜか OSX Firefox のデフォルトフォントサイズが 14px だという事 (参照: 各ブラウザのデフォルトフォントサイズ | Bowz::Notebook)に端を発する、OSX の Firefox だけ文字が小さめになってしまうこと。結局、「まぁ、いいやw」と相対指定にしましたが。

関連リンク

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中