Webtech Walker

font-familyの憂鬱

最近font-familyの指定で悩んでます。少し前までは、下記エントリーのような理由で、ヒラギノ→メイリオ→MS P ゴシックみたいな感じで指定していました。

CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係

ヒラギノを指定しなくなった理由

わけあってヒラギノをwindowsにインストールする必要がありまして、しばらくインストールしたまま使っていたのですが、windowsでヒラギノの表示は少々汚くて見づらいものがありました。

しかも、ヒラギノで表示されるサイトがかなり多いんです。それに耐えられなくなり、ヒラギノは使うときだけインストールするようにして、いったんアンインストールしました。いくらwindowsにヒラギノを入れているユーザーが少ないといっても、自分でそういう経験をしたので、ヒラギノの指定はしづらくなりました。あと、自分の周りのデザイナーさんとか結構ヒラギノ入れてる人いますしね。

欧文フォントのみ指定することに

それで悩んだ結果、日本語フォントは指定せずに、欧文フォントのみ指定するようにしました。ちなみに個人的にはverdanaが一番見やすいです。

body {
    font-family: Verdana,Arial,sans-serif;
}

IEで問題

しかし・・・これだとIEで問題がありました。文字コードがUTF-8で、日本語フォントを指定しないと、IEはフォントサイズ11px相当の文字を12px相当の大きさで表示させてしまします。先にverdanaしておけばいいんじゃね?と思って下記のように指定してみましたがダメでした。(11pxが12pxで表示させる)

* html body {
    font-family: Verdana,'MS Pゴシック',sans-serif;
}

どうやら日本語フォントを先に指定しないとダメっぽいです。ホントにIEってば手間がかかる子だこと・・・

解決策

個人で作るサイトの場合は11px相当のフォントサイズの使用を避けるか、UTF-8以外の文字コードにすればいいんですが、仕事でコーディングしていると、そうも言ってられません。なので、文字コードがUTF-8で11px相当のフォントサイズがある場合は、IEのみ日本語フォントを指定してみます。

body {
    font-family: Verdana,Arial,sans-serif;
}

* html body {
    font-family: 'MS Pゴシック',sans-serif;
}

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

もしくはbodyに指定するのでなく、11px相当のフォントサイズのところだけ日本語フォント指定するとか。どちらにせよ微妙に気持ち悪いですけど。もうこうなったらjavascriptでWinとMac分けて指定するのも悪くない気がしてきた。

このエントリーをはてなブックマークに追加