IEで起こるfont-familyでの日本語フォント有無による文字サイズの変化バグ
ネタ元：font-familyの憂鬱 - Webtech Walker
以前から気づいていたのですが、
％でfont-sizeを指定していると、
IEだけなぜか他より少し大きくなっていた。
フォントの問題なんだろうなって思っていたけど、
こればかりはどうしようもないなとあきらめていた。
文字コードがUTF-8で、日本語フォントを指定しないと、IEはフォントサイズ11px相当の文字を12px相当の大きさで表示させてしまします。
font-familyの憂鬱 - Webtech Walker
そんな時にネタ元のエントリーを見つけたのだが、
本当にそれだけで変化するのか！？
と不思議に思ったので検証してみることにした。
CSSの設定など
今回のCSS設定は日本語フォントの指定ありと無しを用意した
（fontの部分だけ抜粋）
◎日本語フォント指定無し
body{
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
}
* html body {
font-size: 62.5%;
}
*:first-child+html body {
font-size: 62.5%;
}
◎日本語フォント指定有り
body{
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
}
* html body {
font-size: 62.5%;
font-family: 'ＭＳ Ｐゴシック',Verdana, Arial,sans-serif;
}
*:first-child+html body {
font-size: 62.5%;
font-family: 'メイリオ','ＭＳ Ｐゴシック',Verdana, Arial,sans-serif;
}
上記のようにIEの部分だけに今回はつけて検証します。
検証
今回用意した二つです。
● IE6のスクリーンショット(日本語フォント指定無し)
● IE6のスクリーンショット(日本語フォント指定有り)
補足
IEだけでなく、他のブラウザでもみてみた。
● Firefoxのスクリーンショット(日本語フォント指定有無どちらも同じ)
※Safari、Operaでの検証は今回はしませんでした。
結果
IEではfont-familyで日本語フォントを指定しないと、
なぜか設定している大きさよりも少し大きくなった。
ちなみに他のブラウザでは、全て表示が同じだった。
文字サイズを同じにするには、IEだけには日本語フォントを設定したほうが良さそうだ。
ただ、改行が他ブラウザと異なるようなので、
そこの指定もしないと、結局は同じにならない様子。
改行の位置も含めて、再度検証してみたほうがいいかもしれない。
いずれにせよ、細かいところまで気にして同じにするようなら、
さらに指定方法を突き詰めた方がいいが、
このくらいの誤差程度であれば、日本語フォントを指定してもしなくても、
どちらでもかまわないのだろう。
個人的にはこのくらいの差であれば、どちらでもいいと思う。
結果補足
ネタ元ではUTF-8でと書いてあったのだが、
今回の検証はShift_JISの文字コードで行ってみた。
それでもその文字が大きくなる現象が発生したので、
文字コードはこの件に関しては関係なさそうである。
検証していないので、そこは断言できないがたぶん関係ないだろう。
