Google Chrome で text-shadow したフォントの表示がおかしくなる条件と対処法

Category : CSS

Google Chrome で text-shadow したフォントの表示がおかしくなることがあったのでちょっと調べてみました。
Arial やメイリオといったアンチエイリアスのかかったフォントが汚くなったり、ビットマップフォントにアンチエイリアスがかかってしまう現象です。

環境は Windows Vista/7 + Google Chrome 13.0.772.0 dev-m です。

Google Chrome 14.0.835.8 dev-m で発生しなくなっているのを確認しました。
そのうち正式版でも問題なくなるんじゃないかと思います。

CSS text-shadow on Google Chrome Test

上段が Consolas 指定、下段が MS Gothic 指定です。

スクリーンショットは以下の通り。

テストページ の Consolas 指定部分のスクリーンショット

テストページ の MS Gothic 指定部分のスクリーンショット

Google Chrome は一部の text-shadow にブラウザ独自のアンチエイリアスを使用するらしく、それによって起こる現象と思われます。

また、上のテストを見る限りでは
「最初のシャドウ指定にブラーが設定されており、アルファ値が 0 以外のカラーを指定している」
という条件で発生するようです。
2つ目以降のシャドウの指定は特に影響しないようです。

上の条件を満たすような指定をする場合には最初のシャドウ指定に 0 0 0 transparent などを指定すると回避できるようです。

参考ページ

一番最後のは @xl1blue さんが作ってくれました。
chromium のを見ると、ずいぶん前から知られているんですね……。

Leave a Reply