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 to do with Cleartype. Google, please fix this.

I've been using CSS3 text-shadow to emulate IE9's font smoothing on other browsers. Basically I've just set the text-shadow of a container's text to the container's background. You can see the behavior by setting text-shadow on a largish font element in anything lower than Chrome 14.0.833. The text looks smooth. Remove the text-shadow and the font looks jagged. However, in Chrome 14.0.833 (UPDATE: appears it's also "broken" in 14.0.834) this no longer works. The text-shadow property still works, but not in the way it did before. You can see the behavior here (just load it up with diff. Chrome versions) It seems as if in the older Chromes the text shadow began inside the text just a little and then spread out - which is perhaps why the text-shadow hack worked. In the newer Chrome, it appears the text shadow starts just outside the text, which is why it won't work. See what I mean here.

My question is basically: Is this a bug? Which is expected behavior, if either? Are there any other font smoothing workarounds I can use?

The W3C's spec didn't seem to say what the intended behavior is, though I did see that perhaps I should be using text-outline (which is kinda unsupported, which defeats the purpose)

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

Answer 2

Okay, i've spend quite a bit of time on this and this is what it comes down to: It's a bug.

First of all, -webkit-font-smoothing:antialiased; only works for Mac, not Windows.

I'm on Windows7, I've created a layered Pixlr image with screen shots of a JSfiddle I made that had 4 different elements with different text-shadow applied to each. You can clearly see that text-shadow has changed since Chrome13 and Chrome 14.0.835. I had to switch between the Beta and Dev channel a couple of times because I messed up, uninstalling etc. ugh.

Download the layered Pixlr image file I made from:

http://dl.dropbox.com/u/7353877/Chrome-text-shadow-v13-v14_0_835.pxd

Then go to http://pixlr.com/editor/ and choose to open file from computer, open the file. Now in Pixlr, zoom in to the four rows of text, in the layers panel on the top layer click the checkbox and uncheck it, then check it again, do it over and over and see how drastic the change to text-shadow is.

This should be submitted as a bug. A link back to this page could be used to show the effect, if needed.

JSfiddle (The JSfiddle I used in the screenshots) http://jsfiddle.net/nicktheandroid/Xkp9q/

I put a piece of pie in the microwave an hour and a half ago.... it's cold :(

Answer 3

text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;

OR

text-shadow: transparent 0px 0px 0px, rgba(0,0,0, 0.75) 1px 2px 1px;

Tested and works fine in different versions of Opera, Chrome, Safari & Firefox.

Answer 4

-webkit-font-smoothing:antialiased; 

might work for you

Answer 5

YES! I've found a solution for this problem. It's weird, but it works for me.

So, to make it work, put this style on the element you want to smooth:

-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;

I've put up a sample HTML file with just this style so you can quickly test it.

Answer 6

This was indeed how a lot of webfonts (Google Webfonts and also highly professional fonts from Typekit etc.) looked in Firefox (left) and Google Chrome (right) on Windows systems (and eventually elsewhere too). No joke! To clarify this: The only browser that completely messed up Google Webfonts was Google’s browser Chrome. How sick is that ? In 2013 Opera browser has switched it’s rendering engine to webkit (=the rending engine in Chrome), so this problem exists in Opera too.

more : http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/