Fonts are rendering differently across apple devices. So frustrating

I am hoping some of you css wizards might have run into the problem I'm about to describe.

I've created css3 buttons for a clients website, in order to replace their current image buttons. The buttons happen to be a light font face on a dark value background (white text on a red background).

On OSX and iOS, the quartz rendering engine kind of freaks out about this, and anti-aliases the font to death. Bold become really rea开发者_JAVA技巧lly really bold.

The strange thing is, I develop on a Mac, and cannot replicate the rendering problem the client is having across multiple devices. I've made sure I only have system fonts enabled, that my font smoothing is set the same, etc...

I found an article that suggested a fix for webkit based browsers here, and have seperated the text from it's background in order to give just the text an opacity value.

Still, no dice. Anyone have idea what could be the problem here?

Sample image:

I've encountered bolding issues with web fonts on webkit based browsers. I used the following CSS property to remedy it:

-webkit-font-smoothing: antialiased;

Seems like a better solution than messing with opacity to fix font weights... which really just feels like a hack.