html - 字体在 IE 中不起作用

Question

代码:

@font-face {
    font-family: 'GothamRnd-Medium';
    src: url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.eot');
    src: url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.eot?#iefix') format('embedded-opentype'),
         url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.woff') format('woff'),
         url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.ttf') format('truetype'),
         url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.svg#GothamRnd-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'ArcherBoldItalic';
    src: url('about/fonts/Archer-BoldItal/archer-boldital.eot');
    src: url('about/fonts/Archer-BoldItal/archer-boldital.eot?#iefix') format('embedded-opentype'),
         url('about/fonts/Archer-BoldItal/archer-boldital.woff') format('woff'),
         url('about/fonts/Archer-BoldItal/archer-boldital.ttf') format('truetype'),
         url('about/fonts/Archer-BoldItal/archer-boldital.svg#ArcherBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;     
    }


    @font-face {
    font-family: 'proxima_novalight';
    src: url('about/fonts/ProximaNova-Light/proximanova-light-webfont.eot');
    src: url('about/fonts/ProximaNova-Light/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('about/fonts/ProximaNova-Light/proximanova-light-webfont.woff') format('woff'),
         url('about/fonts/ProximaNova-Light/proximanova-light-webfont.ttf') format('truetype'),
         url('about/fonts/ProximaNova-Light/proximanova-light-webfont.svg#proxima_novalight') format('svg');
    font-weight: normal;
    font-style: normal;

}

我嵌入了三种字体。三种字体中的“proxima_novalight”字体在 IE8 中运行良好，但其他两种字体无效。我检查了所有代码，但没有找到解决方案。它在其他浏览器中工作正常。伙计们有什么想法吗？

Answer 1

If IE8 throws the CSS3111: @font-face encountered unknown error, you probably have the non-matching font-family name problem.

To resolve this, you need to edit your font file, define identical names for Fontname, Family name and Name for humans and export your TTF. This can be done using the FontForge application. Afterwards, you than again convert it for web (EOT, WOFF).

@font-face {
    font-family: 'portagoitc-tt';
    src: url('fonts/portagoitc-tt.eot');
    src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'),
         url('fonts/portagoitc-tt.woff') format('woff'),
         url('fonts/portagoitc-tt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

详情请查看

Font Face not working in IE8 as expected