hagino3000's blog

平成アーカイブス (更新停止)

IE7 + メイリオ でフォントがジャギるのをなんとかしてみる

IE7のバグの一つ、「filter:alphaで半透明にした要素上(子含む)のフォントのアンチエイリアスが無効になる」に対応する話。


この現象、半透明大好きwebデザイナだけではなく、jQueryscriptaculousでフェード効果を使った事のあるエンジニアも多く悩まされたのではないでしょうか。
この時に一番問題になるのがWindows VistaマシンでIE7を使っているユーザ対応です。Vistaは標準でメイリオを搭載していますのでwebページも他のフォントより綺麗なメイリオで表示させたいです、がしかしVistaに搭載されているブラウザはIE7なので、自然とVista + IE7という組み合わせが発生します。

今の所のアイデアとして以下の2つを書き留めます。

フェードする時だけ対応

フェードする時にフォントがジャギるのが気になる場合はどうするか。
一つはフェードが完了したタイミングで要素のstyle属性からfilterの値をremoveしてやればOK。
フェード後にフォントが崩れるのを抑えることができます。

document.getElementById('foo').style.removeAttribute('filter');

IE7 + Vista の時にフォントを変えてしまう

標準のフォント指定が次の通りだとします。

body {
font-family: verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

IE7+Vista用にメイリオの指定を抜いたCSSファイルを用意します。

div{
font-family: verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'MS Pゴシック',sans-serif;
}

上記CSSファイルをIE7+Vistaでページを表示した時のみロードさせる。

(function(){
var ua = navigator.userAgent;
if(ua.indexOf('MSIE 7') >= 0 && ua.indexOf('Windows NT 6') >= 0) {
    document.write('<link rel="stylesheet" href="./modify_IE7VISTA.css" type="text/css" media="screen" />');
}
})();


追記:条件付コメントでIE7の時だけ読ませればおkっぽいすね、考え直すと
さらに追記:↓の条件付きコメントの所、Firefoxだと時々全く表示されなかったりします……はてダのバグかなぁ。

<!--[if IE 7]>
<link rel="stylesheet" href="./css/modify_ie7vista.css" type="text/css" media="screen" />
<![endif]-->

まとめ

どっちもめんどくさい!!
もっと簡単な方法があれば教えてください(>_<)