Is it possible to create a Mac OS specific CSS to fix font difference?

Question

I'm working on a project with a designer and he insisted on using some specific font for titles and various elements in the page. So we're using a font kit to embed with @font-face.

It's working perfectly on PC (Firefox, IE 7 and 8, Chrome, Safari) but on Mac OS (Safari and Firefox) the fonts are not vertically aligned the same way. After looking on the Web, I didn't find any solution for this except "there always been differences between browsers and platforms, live with it".

I know that fonts are never rendered exactly the same across platforms, but this time it's not something like the font looks more bold or something like that. The font looks as if it's baseline is completely different between Windows and Mac OS X. On Mac OS, the font, at a size of 16px is 3px higher than on PC.

So I'm looking for a backup solution : is there a way to create a CSS specifically for Mac OS users? I do not want to target only Safari because Safari PC is ok, and Firefox Mac is not ok.

Or if you have a solution to fix the baseline difference that does not require a specific CSS file, I'd be happy to hear it.

Thanks!

Answer 1

I'm afraid that browser/os sniffing is your only option. CSS itself has no knowledge of OS nor do i have ever heard of a css hack that targets osx specifically.

This is the easiest way for me to detect OSX and add the OSX class to the document body so you can override css styles for OSX specifically.

if(navigator.platform.match('Mac') !== null) {
    document.body.setAttribute('class', 'OSX');
}