No antializing in chrome with font-face (in some places)

The project I'm working on is secret, so I can't show you, but I will do my best to explain it.

So the deal is t开发者_开发技巧hat I'm using a font through @font-face (generated via fontsquirell). The font is being used as headlines and in the main menu which is kinda big and Arial is used for copy.

The problem is that in Chrome and IE (not Fx or Opera), the text in the menu looks ugly, it's not smooth. The rest of the page works as supposed, only in the menu this happens. But when I hover a link in the menu, it transforms into a beautiful text (what probably happens is some kind of reflow or something).

I have two files (that's important in this case): screen_typography.css screen_layout.css

I got a minifier thingy going on so in the end it's only one css file that the browser load. In the typography file im importing the font and sets it to the headlines. In layout css I'm setting the font for the menu. The font is set to the -tag which is inside the li.

In the moment of writing I'm seeing that this only occurs in Mac OSX, not on Windows (haven't tested it on Linux).

Does anyone know why this is happening?

I had a similar problem in IE – I found that setting position:relative on the text fixed it. Not sure why though!

I made it work by setting the navs parent to position absolute and the nav itself. Then I gave the nav a z-index value of -1, to hide behind its parent but still being interactive since the parent doesn't have a background. That way, the parent acts like a shield to protect its child from getting dirty :D