IE8 - Font anti-alias strange behaviour (w/ prints. example)

Question

Hi people...

As every web-developer I'm tired of Internet Explorer... I'm working on a new website and use font-face (the problem may not be related but just in case...):

@font-face {
    font-family: 'ArabicTypesettingRegular';
    src: url('arabtype-webfont.eot');
    src: local('☺'), url('../../../partilhado/fontes/arabtype-webfont.woff') format('woff'), url('../../../partilhado/fontes/arabtype-webfont.ttf') format('truetype'), url('../../../partilhado/fontes/arabtype-webfont.svg#webfontz5xQb9Ii') format('svg');
    font-weight: normal;
    font-style: normal;
}

The problem that I'm facing with is related w/ anti-alias/font smoothing... It's working fine in every browser but IE8 (I don't care about older versions)... To complicate it a little bit more, it works on some titles, but in some others it fails.. I can assure that the elements share the same classes, as you can see in my example HIGHER RESOLUTION IMAGE HERE..

Css class:

.title{
font-family:"Arabic Typesetting";
font-size:24px;
margin-top:10px;
}

I tried to change it from 'px' to 'pt' but it didn't solve my problem...

[EDIT] I remove font-face and with Arial the problem remains the same...[/EDIT]

Do you have any ideas? Or some comments about this issue...

---

Thanks in advance,

Pedro

Answer 1

I suppose you are using a css filter alpha opacity on the background of the first title.
It cancels the anti-aliasing.
You will find a fix (add and remove a background color) here.