フォントサイズの指定、って
先日、デザイナの方からコーディングクロスチェックにおいてフォントサイズを突っ込まれました。漠然とではありますが、ちくと調べてみましたよ。
命題
前提
- Firefoxのオプションにて既定フォントサイズを16pxにする（IEとの同期のため）
- 標準準拠モードでレンダリング（HTML書式はXHTML 1.0 tranditional）かつUTF-8
- 命題１を実現するためにCSSでフォントサイズを%もしくはemで指定する
- CSSでデフォルトサイズを以下のように指定
body {
font: small/160% "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", verdana, arial, Sans-Serif;
}
検証
命題２について
前提１と４より、通常ではフォントは見かけ12px位で表示されます。これを見かけ10pxで表示したいため、
10 / 12 = 0.8333
より、83%もしくは0.83emとすれば10pxで表示される・・・ハズであるが
Firefox 想定通り、見かけ10pxで表示 IE 文字間が詰まって小さく見えるが、見かけ12pxで表示
あら？？？IEサイズかわってないヨ！！
もうちょっと小さく（75%もしくは0.75em）してみると
12 * 0.75 = 9
で9pxで表示されると思ったのですが・・
Firefox 見かけ10pxで表示 IE 見かけ10pxで表示
君たち計算デキテナイヨ！！！
理論上の数字では上手くいかない。
Firefoxでは計算上のサイズになってくれるのですが、IEではそうも行かない。%やemで細かく指定しても、そのサイズが無ければブラウザは近似値のサイズを取るらしいのですが、その近似値の取り方に違いがあるみたい。
Firefox 100〜89% - 12px 88〜74% - 10px 73〜 - 8px IE 100〜79% - 12px 78〜64% - 10px 63〜 - 8px ※emでの指定も同様
要するに命題１と２をクリアするにはフォントサイズを 78〜74%で指定しなければならないデス。
命題３について
上記検証のように75%もしくは0.75emで指定したときに、ブラウザで文字サイズを変更してみます。
Firefox - 文字サイズ 小さく 見かけ8pxで表示 IE - 文字のサイズ「小」 若干文字間は詰まるものの、見かけ10pxで表示
なんだこりゃ。IE感度悪し。
推測しますに、ブラウザが近似値を取るものの、実はバックグラウンドでは指定したパーセンテージを保持しているのでは。（実際、文字間が微妙に詰まっているのはそのため？）
例えばIEで命題１をクリアするために78%と指定したときと64%としたときでは命題３について問題が発生します。
78%で指定 + 文字サイズ「小」 若干文字間が詰まるが、見かけ10pxで表示 64%で指定 + 文字サイズ「小」 見かけ 8pxで表示（！！）
・・文字サイズ「中」→「小」→「最小」の縮小率まで出さないといけないのですか？？Firefoxで「Ctrl + -」押したときの縮小率まで出さないといけないのですか？？
