font face not working in ie

问题:

I have created a html layout and using css3 @font-face. Here is my code

@font-face {
    font-family: 'MyriadProRegular';
    src: url('myriad.eot');
    src: url('myriad.eot?#iefix') format('embedded-opentype'),
         url('myriad.woff') format('woff'),
         url('myriad.ttf') format('truetype'),
         url('myriad.svg#MyriadProRegular') format('svg');
}

and i am using

font-family: 'MyriadProRegular';

it's work in all browsers accept IE. Please help.

回答1:

I can't recommend Font Squirrel enough for this. Just run through their Font Face generator and you'll get code that will work in IE. If you're missing a font file type it even makes that for you. It's saved me a lot of time in the past and I can't recommend it enough.

http://www.fontsquirrel.com/fontface/generator

This is from Font Squirrel and works cross browser:

@font-face {
    font-family: 'NimbusSanConD-Lig';
    src: url('fonts/228BFB_1_0.eot');
    src: url('fonts/228BFB_1_0.eot?#iefix') format('embedded-opentype'),
         url('fonts/228BFB_0_0.woff') format('woff'),
         url('fonts/228BFB_0_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

回答2:

are svg, woff and eot even (supported) font types? I'm pretty sure .svg is not and I've never heard of .woff and .eot.. Just a truetype should work in all browswers. (I'm not sure about Macintosh though)

the way font-face always works for me:

@font-face {
    font-family:alba;
    src:url(alba.ttf);
}

So no quotes used here. What I'd suggest to also try for your case, is to do it like

@font-face {
        font-family:Myriad Pro Regular;/* note the whitespaces, I believe this is what the font itself is called (not the filename) */
        src:url(myriad.ttf);
    }

Make sure you always mind the difference between uppercase and lowercase letters! If the font file is called Myriad.ttf while you type myriad.ttf, it might not work in some browser(version)s.