CSS3 @font-face 在 IE 9 中不工作

Question

以下 css 在 IE9 中不工作。在 Firefox 和 Chrome 中工作。请帮助...

<style>
    @font-face {
        font-family: 'myFirstFont';
        src: url('fonts/test/MB-ThinkTwice_Regular.ttf');
    }
    @font-face {
        font-family: 'myFirstFont_IE';
        src: url('fonts/test/MMB_ThinkTwice.eot?#iefix') format('embedded-opentype');
    }
</style>
<div style="font-family:myFirstFont, myFirstFont_IE; font-size:64px;">
    This is test TEXT
</div>

Answer 1

您可以将您的字体组合成一个定义，为 IE 创建一个单独的字体，您只需要提供所有需要的字体文件类型。下面的示例应该在 IE6-9 中工作。

@font-face {
    font-family: 'myFirstFont';
    src: url('fonts/test/MB-ThinkTwice_Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/test/MB-ThinkTwice_Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/test/MB-ThinkTwice_Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/test/MB-ThinkTwice_Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
}

只有 IE6 到 8 才需要 #iefix