Using jQuery animate CSS opacity fade and @font-face gives Internet Explorer very ugly font rendering?

Question

I\'m working on a site with HTML/CSS/jQuery that is trying to act like a Flash site. I\'ve had to use @font-face to get the desired font to work. The client wants the fade in of

Answer 1

I struggled with the cleartype / opacity problem too. I discovered that if the element I want to fade has a solid color background set (css background-color property), the text will render correctly during - and after - fading. So if you don't need a transparent background for the text you can use this workaround. Testet in IE7 only.