2012年06月15日

メイリオ に filter Microsoft.DropShadow を適用すると我慢できないほど汚くなる

CSS3 で表現の幅が広がったウェブデザインですが、IE の対応状況のせいで無駄に時間を取られることが多いです。

僕はホビイストなので、ため息をつくくらいで済みますが、本業の方のご苦労はいかがなものかと思います。

たとえば CSS3 の text-shadow です。
モダンブラウザではサポートしているこのプロパティ、IE8 が未対応なのはともかくとして、IE9 も未対応というのは、なんとも。

Google で先人たちに伺ってみると、やはり回避策(というか応急処置)はあるようで、みなさんは filter を使うことを推奨(というかry)しているのですね。

で、今回僕がハマったのは、この filter です。

//
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(OffX='1',OffY='1',Color='#66000000',Positive='true')";

この filter を使うことで、WinXP の IE8 では、まあ、がまんできるレベルの影がつくのです。

しかし、Win7 の IE9 では影が汚過ぎて受入れられるレベルではありません。

1日置いて、やっと原因に気付きました。
それは font-family にメイリオを指定してあったからでした。

このメイリオに、上の filter を掛けるとフォントの輪郭が黒く縁取られてしまうのです。そのせいで影が汚く見えていたというわけです。(下↓に参考画像があります)

だから、正確には Win7 のせいでも IE9 のせいでもなく、メイリオのせいということになるでしょうか。(そもそも IE が text-shadow にきちんと対応していればry)

なので、この filter を使用する部分だけ、font-family: "MS PGothic" を指定することで、よしとしました。

参考)とても汚いメイリオの影
dropshadow_d.png
参考)MS Pゴシックの影
dropshadow.png
ラベル:CSS
posted by ガトー at 18:17| Comment(0) | WEB | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

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