Comments on: Safari’s text-shadow anti-aliasing CSS hack Revision

By: Matan

Matan — Sat, 13 Feb 2010 02:38:55 +0000

BWRic:
“Also, is there similar fix for Firefox on the Mac?”

By: 50 New CSS Techniques For Your Next Web Design « SUMERA’S Weblog

50 New CSS Techniques For Your Next Web Design « SUMERA’S Weblog — Tue, 26 Jan 2010 11:32:48 +0000

[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]

By: BWRic

BWRic — Mon, 18 Jan 2010 12:03:30 +0000

Also, is there similar fix for Firefox on the Mac?

By: BWRic

BWRic — Mon, 18 Jan 2010 11:04:50 +0000

What we need now is to detect if the user is running OS X or Windows, as the standard rendering in Safari 4 on Windows is okay. It’s only a problem if they changed the preferences but I don’t think many people will switch to fat text mode. Any clever ways to do this in CSS or do we need to load extra styles just for Mac Safari?

By: Josh Nielsen

Josh Nielsen — Wed, 13 Jan 2010 06:56:32 +0000

Steve Smith from ordered list found something that worked for me in safari:
body { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}

http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/

By: Josh Nielsen

Josh Nielsen — Sat, 02 Jan 2010 15:34:19 +0000

I also don’t see a difference until I set it to text-shadow:rgba(0,0,0,0.01) 0 0 1px; and even then It is only in Chrome that it works. Safari 4 and Firefox 3.5 both look really fat on my mbp.

By: 50 New CSS Techniques For Your Next Web Design | Theme Center

50 New CSS Techniques For Your Next Web Design | Theme Center — Sun, 13 Dec 2009 07:47:55 +0000

[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]

By: JB

JB — Wed, 29 Jul 2009 07:27:43 +0000

Guys, if you take the screenshots into photoshop and zoom in, you’ll see safari 3 is using LCD subpixel rendering (you see the green and red fringes). The safari 4 screenshot is using standard CRT font smoothing (grey scale anti aliasing). I’m surprised none of you has noticed this

This hack is just disabling subpixel rendering. I’m on windows and safari 4 has these font options in its preferences. On mac this is controlled by your OS system settings instead.

It looks like safari 3 wasnt respecting your OS prefs and now safari 4 does?

Apple’s subpixel rendering makes the fonts too thick even on the “light” setting.

By: 50 New CSS Techniques For Your Next Web Design | Desinine

50 New CSS Techniques For Your Next Web Design | Desinine — Thu, 23 Jul 2009 08:16:13 +0000

[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]

By: 50 New CSS Techniques For Your Next Web Design - Programming Blog

50 New CSS Techniques For Your Next Web Design - Programming Blog — Mon, 20 Jul 2009 23:15:14 +0000

[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]