Operating sytem detection for CSS hacks (aka need a "PC only" CSS hack)

Question

I don't like Microsoft's font rendering.

I've created a site for a client and the last unticked box on my debugging list is the biggest. (it's not 'live' yet btw so please ignore any other bugs - http://baked-beans.tv/bb)

I'm using font-family to import a non standard web font. It renders fine on Mac, but it looks like sick old man on its last legs on PC.

The biggest irony is that the font is actually ok to read in internet explorer 8. This is the first time I've EVER seen IE beat other browsers in anything. But anyway, the font doesn't look good in FF, Chrome, or Opera, on a PC.

So my solution is to serve different fonts to PC users. There are a lot of css hacks for different browsers, but not for different OS. the php OS detections are really really complex. I'm just looking for something simple like if(PC) do this; else do that;

Any advice would be immensely helpful

Just one other thing... Just wondering if there is a way I could prevent Windows from anti-aliasing type on the Internet? The reason why it looks so bad is because it's trying to anti-alias it, maybe if it left the poor font alone it wouldn't look so bad.

Answer 1

No, you can't "kill" anti-aliasing.

But, you could use http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/ for detection.

From what I saw only the headlines are crap so you could as well use http://cufon.shoqolate.com/generate/ for those and make your life easier.

Answer 2

My favorite article on this topic is here:

http://getsatisfaction.com/typekit/topics/typekit_fonts_rendering_horribly_on_windows_based_systems

There is a lot of good discussion including TypeKit developers on the reasoning behind that, and it has a link to an interesting article about using JavaScript to detect whether font smoothing is in use (you definitely can't do it with CSS alone).

http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/

Good luck.

Answer 3

I'm just looking for something simple like if(PC) do this; else do that

To me it means you will need a javascript solution.
Id translate it as if MAC serve this style sheet, in this case you could handle the if mac part using something like navigator.platform.indexOf("Mac");.

As a bonus ill give you a filter for IE if (m=/*@cc_on!@*/0) this way you can also serve them the default font.

source

Answer 4

The CSS Browser Selector can target different OS's. :)