Google Chromeのtext-shadow処理について
前々から気になってはいたのだけど、今回ちゃんと検証したのでメモ
text-shadowによるテキストシャドウの適用は、Safariではかなり早い段階から採用されていましたが(CSS2.1)、今回Firefox3.5にてtext-shadowプロパティのレンダリングが可能になったので、補助レベルでは使えるものになってきたのではと思います。
text-shadowの仕様については他サイトやドキュメントを見て頂くとして、問題はGoogle Chromeでのテキストシャドウのレンダリングです。（当初Windowsの問題としていましたがMac版でも同じでした）
おそらくテキストシャドウを生成するときにフォントのアウトラインを取る処理に起因するものだと思うのですが、ぼかしのついたシャドウをかけるとフォントのレンダリング結果が通常の場合と変わってしまいます。
どちらが綺麗とかいうわけではありませんが、一応違うということだけデザイナーは知っておくといいのではと思います。
なおtext-shadowプロパティの3番目の引数、ぼかしの値が0の場合レンダリングは通常通りになります
今回検証ページで、フォントとシャドウの有無などの組み合わせを並べた検証ページを作りましたので気になる方はGoogle Chromeで以下のページを見てみてください。
・Google Chrome における text-shadow のフォントレンダリング
検証ページのスクリーンショットから、シャドウなし
シャドウあり
この他にもChromeはレンダリングにアラが見えますね。ブラーの品質はFirefoxやSafariと比べて低めです。
また、リンクに下線がある場合なんかも別々にシャドウを落とすので重なった部分が不自然になってしまいます。
Firefox
Chrome
余談ですが、流行の使用法としてはテキストシャドウを影として使うのではなく、色のある背景に白シャドウを指定して立体感を出す、という感じの使われ方が多いように思えます。
（検証ページで言うと青背景で囲まれた部分）
その場合は0pxのレンダリング結果のほうが映えますね。
※追記：これを回避する方法
この問題は特にMacだとフォントが細く見えてしまい、色の組み合わせによっては見づらくなってしまうケースがあります。
その場合、text-shadowを指定する時に1つ目のシャドウはぼかしなし、2つ目はぼかしありにするとテキストのレンダリングを変化させることなく影をぼかせるようです。
こんな風に＞ text-shadow: black 0px 0px 0px, black 0px 1px 2px;
ちょっとCSSハック的なのであんまオススメはできないかもしれません！
