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」と相対指定にしましたが。

関連リンク

広告

投稿者: Shinji Kawarano

瓦野 晋治 (かわらの しんじ) 個人と企業をつなぐサービスに目がない、PC、インターネットおたく。最近はさぼり中ですが、ギター弾きであり、オルタナ、パンク、ハードコアからジャズ、クラシック、現代音楽までのリスナーです。 1980年生まれ。早稲田大学大学院理工学研究科(経営システム工学、人間工学)修了。 大学院在学中にWebデザイナーになりたいと思い立ち、株式会社ユニークアイディ(現 株式会社 関心空間)にアルバイトで採用される。同社が開発した関心空間にどっぷりとはまり、修論を関心空間を題材に執筆。2003年、関心空間に正式に参加。 関心空間社では、関心空間のSEO、アクセス解析、ユーザー動向分析などを担当。また、企業への関心空間エンジン導入案件の、企画、導入支援、制作ディレクション、xhtml, CSS コーディング 等も担当。社内のナレッジコミュニティに、インターネットトレンドやニュースを関心空間ではどう活かせるのか等のコンテンツを投稿し続けた。 2007年9月〜2009年2月 アースリングに在籍。ここは親会社がアニメ企画制作会社の旭プロダクション。主にWebサイト制作ディレクションを担当。 結果、3年に少し足りない2年7ヶ月で退社。国プロやお客さんとの仕事を通じ、基本的な仕事の進め方から、コンサルタントやアナリストとしての在り方を勉強させてもらいました。 2008年8月〜現在 個人事業主としてかわらの創造研究所を開業。個人的な頼み事(例えば、ロケットニュース24)や、ブログと落語ニュースで発生するものを処理するためのもの。 基本的にはロケットニュース24やポーチのサポートをしています。顛末はこちらをご覧下さい。(私事ですが

コメントを残す

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

%d人のブロガーが「いいね」をつけました。