IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示
以前エントリーした記事、IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示から1年4ヶ月ほど経ちました。ブラウザの最新版はIE8/FF3/Safari4となったのでフォントのセットを少々変更してみました。
IE8ですが、IE6/IE7と同様にフォントをピクセル指定すると文字の大きさを変更することが出来ません（ページズームを使えと言う感じではありますが）。
以前のセットではhtml>bodyハックでモダンブラウザ(Safari/Firefox)用にフォントをピクセルで指定していたのですが、IE8ではこのハックが有効になってしまい、ピクセル指定したCSSが適用されてしまいます。
今回はIE8をのぞいたモダンブラウザに適応させるhtml:not(:target) bodyを使ってさらに上書きするというハックのダブルがけをしています。
また、個人的にはメイリオはあまり好きではないのですのが、今回も念のためにメイリオをセットに入れています。
body {
font-size: 100%;
font-family: sans-serif;
color: #333;
}
* html body {
font-size: 82%;
font-family: "ＭＳ Ｐゴシック", sans-serif;
vertical-align: baseline;
text-align: center;
} /* for lte ie6 */
*:first-child+html body {
font-size: 82%;
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
} /* for ie7 */
html>/**/body {
font-size: 82%;
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
} /* for ie8 */
html:not(:target) body {
font-size: 13px;
font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;
} /* for modern browser not ie8 */
- まずベースとなるフォントファミリー、サイズをbodyに設定します。
- * htmlハックでIE6用のセットを設定します。
- *:first-child+html bodyハックでIE7用セットを設定します。
- html>/**/bodyハックでIE8用セットを設定します。このままだとFirefoxやSafariにもこのセットが適用されてしまいますので次のハックでFirefox、Sarafi用に上書きします。
- html:not(:target) bodyハックでFirefox、Safari用セットを設定します。
Leve comment