Font Smoothing Techniques? text-shadow rendering differently in Chrome 14.0.833.0 or higher

Question

EDIT:

We\'re in Chrome 19 now, and this still isn\'t fixed. Just a clarification: this happens in Chrome on Windows, not Linux or Mac. I think it has t

Answer 1

Well, I've figured it out, sorta. Annoying since I set a bounty, but whatever. I'm fairly certain this is not a bug and it is expected behavior - especially since we've seen a few more iterations of Chrome and it's stayed the same. A few different methods work. I wrote up a bit for my blog, you can see the full article here, but here's the bulk of it:

First, I tried the -webkit-text-stroke:1px #000 where #000 is the color of the text. But this style is meant for use where the color of the text is different from the stroke, for a nice text-outline. When both are the same color, it looks...odd. I'm not sure why; I'm no font-rendering expert. You can see the behavior in the picture after the article.

Next I tried a simple text-shadow:#000 0 0 1px where #000 is the same color as the text. Due to the same Chrome 14.0.833+ problem, this still leaves the font looking somewhat jagged. It's better than just plain text, however.

Next I tried a combined the two attempts above. This looks a little bit better, but it bulks up the text as it essentially adds 2 pixels to the thinkness of the text.

Lastly, I tried applying two text-shadows: text-shadow:#000 0 1px 1px,#000 0 -1px 1px > > where #000 is the color of the text. What this does is apply two text shadows, one of which is pushed down a little and the other pushed up. This way, the text shadow covers the jagged edges. It bulks up the text a little but definitely smooths it out.

Depending on the size of your text, different methods work. Smaller (but still jagged) text could use the text-shadow, larger text could use the shadow/stroke method, and very large text could use the dual-shadow method. Of course the larger the text the less noticeable the extra few pixels become. You can see all the different methods here