THE HAM MEDIA BLOG

IEで起こるfont-familyでの日本語フォント有無による文字サイズの変化バグ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
バグ
IE
font
CSS

ネタ元:font-familyの憂鬱 - Webtech Walker

IEで起こるfont-familyでの日本語フォント有無による文字サイズ変化のバグ

以前から気づいていたのですが、
%で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: 'MS Pゴシック',Verdana, Arial,sans-serif;
}

*:first-child+html body {
font-size: 62.5%;
font-family: 'メイリオ','MS Pゴシック',Verdana, Arial,sans-serif;
}

上記のようにIEの部分だけに今回はつけて検証します。

検証

今回用意した二つです。

● IE6のスクリーンショット(日本語フォント指定無し)

IE6 フォントファミリー指定無し

● IE6のスクリーンショット(日本語フォント指定有り)

IE6 IE6 フォントファミリー指定有り

補足

IEだけでなく、他のブラウザでもみてみた。

● Firefoxのスクリーンショット(日本語フォント指定有無どちらも同じ)

Firefox フォントファミリー指定無し

※Safari、Operaでの検証は今回はしませんでした。

結果

IEではfont-familyで日本語フォントを指定しないと、
なぜか設定している大きさよりも少し大きくなった。

ちなみに他のブラウザでは、全て表示が同じだった。

文字サイズを同じにするには、IEだけには日本語フォントを設定したほうが良さそうだ。

ただ、改行が他ブラウザと異なるようなので、
そこの指定もしないと、結局は同じにならない様子。

改行の位置も含めて、再度検証してみたほうがいいかもしれない。

いずれにせよ、細かいところまで気にして同じにするようなら、
さらに指定方法を突き詰めた方がいいが、
このくらいの誤差程度であれば、日本語フォントを指定してもしなくても、
どちらでもかまわないのだろう。
個人的にはこのくらいの差であれば、どちらでもいいと思う。

結果補足

ネタ元ではUTF-8でと書いてあったのだが、
今回の検証はShift_JISの文字コードで行ってみた。
それでもその文字が大きくなる現象が発生したので、
文字コードはこの件に関しては関係なさそうである。
検証していないので、そこは断言できないがたぶん関係ないだろう。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。