Menu
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)
295
CSS Font Smoothing Clean up sub-pixel rendering and improve text display in Webkit (Chrome) and Mozilla (Firefox) with the following CSS rules: body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; font-smoothing: antialiased; }
Deciding the behavior for a web font as it is loading can be an important performance tuning technique. The new font-display descriptor for @font-face lets developers decide how their web fonts will render (or fallback), depending on how long it takes for them to load.
Working with text in Chrome (and other Webkit-based browser) and Firefox can be frustrating. Depending on context, certain fonts may be displayed weird: too heavy, too fat, too thick, and so forth.
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 :(
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
