Question

I’m using font-face and rotating the div containing it using filter:

    .ie8{
font-family: cscriptie, Georgia, Palatino, Times New Roman, serif;
 background: transparent\9;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
        M11=1.5320888862379554, M12=-1.2855752193730787,
        M21=1.2855752193730796, M22=1.5320888862379558),progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF),alpha(opacity = 100);
 zoom: 1;
 position:absolute;
}

@font-face {
    font-family: cscriptie;
    src: url('/fonts/cscript-webfont.eot');
    src: url('cscript-webfont.eot?#iefix') format('embedded-opentype'),
         url('cscript-webfont.woff') format('woff'),
         url('cscript-webfont.ttf') format('truetype'),
         url('cscript-webfont.svg#webfont') format('svg');
}

It works fine in all browsers besides IE 8 and IE 7 where it looks strange with black pixels around the letters.

I can’t use a background color because the background changes between pages.

This happens only with filter rotation on IE 8 and 7 and with font-face.

Any suggestions?

Answer 1

This will not be a piece of cake…

When you use filters, text anti aliasing is switched off…

try using this css property:

font-weight:lighter;

You might get lucky.

Otherwise you might have to use cufons, svg, flash, pngs… Or just forget about ie