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

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

text-shadow と outline

今回はすでに多くのサイトで使われている text-shadow のこと。outline と text-shadow が同時に表示されるとき、Firefox などの Gecko 系ブラウザだと他のブラウザと表示が違うのでちょっとテストしてみました。

CSS の勉強がてら、:before, :after 擬似要素と CSS3 で画像を使わず blockquote をちょっとおしゃれにしてみました。