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

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 2

-webkit-font-smoothing:antialiased; 

might work for you

Answer 3

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 4

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 5

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/

Answer 6

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