DAICHIFIVE^™ blog+

jQueryを使って、シンプルにcssでのフォント指定関連の問題を解決しました。

以前、cssのフォント指定を完璧にするぜ2009 winterという記事を書きましたが、JavaScriptを使えば、もっとシンプルに指定できると思いつきました。こういった試行錯誤は、とても楽しいですね。

フォント指定のコード 2010 Spring

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
    if($.browser.msie){
        $("body").addClass("msie");
    }
    if (navigator.platform.indexOf("Win") != -1) {
        $("body").addClass("win");
    }
});
</script>

上記を、head内に記述します。

html, h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
 
body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    font-size: 10px;
}
 
body.msie {
    font-size: 62.5%;
}
 
body.win {
    font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

そして、上記がcssコードです。

cssでのフォント指定のポイント

cssのフォント指定での要点をざっと説明すると、

• IEはフォントサイズを相対指定しないと、ブラウザ側での文字サイズ変更ができない。すなわち、cssでのフォントサイズ指定は、原則として相対指定となる。
• フォントサイズを相対指定する場合、1em=10pxで初期化しておくと、直感的にサイズが指定でき、その後の作業効率が劇的にアップする。
• フォントサイズの初期値はブラウザによって変わることもあるため、IE以外のモダンブラウザではbodyに対してfont-size:10px;と絶対指定したほうが確実。
• IEではbodyの文字サイズを62.5%に相対指定し、1em=10px相当に初期化すると、10px（11px）のサイズの文字が12pxで表示されるバグがある。
• そのバグは、font-familyで先頭に日本語フォントを指定することで回避できる。
• Winでヒラギノフォントを指定されると、なんか読みにくい。でも、macでメイリオやMSゴシックを指定されても困る（どちらもインストールされてなければセーフ！）。
• フォント名は、英語表記と日本語表記を両方書いておかないと、一部のブラウザでスルーされる。

要するに、IEとIE以外でフォントサイズ初期化に絶対指定か相対指定かを使い分け、WinとMacで書体の指定を変えられれば、問題が全部解決するというワケです。

今回は、JavaScriptでブラウザやosを判別してbodyにクラスを付けることで、対応しています。javascriptがオフの環境では、IEでの文字サイズ変更ができなくなり、Winでヒラギノが入ってる人が多少不快になりますが、それ以外は問題ありません！