Question

@font-face{ font-family: gotham; src: url('../fonts/Gotham-Light.otf'); } 我在我的css文件中包含了名为Gotham的字体。它在mozilla和所有其他浏览器中工作但在IE9中没有。

Answer 1

请参阅The New Bbulletproof Fontface Syntax

    @font-face {

        font-family: 'MyFontFamily';
        src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
             url('myfont-webfont.woff') format('woff'), 
             url('myfont-webfont.ttf')  format('truetype'),
             url('myfont-webfont.svg#svgFontName') format('svg');
    }

如何运作？

Internet Explorer＆lt; 9在src属性的解析器中有一个错误。如果在src中包含多种字体格式，则IE无法加载它并报告404错误。原因是IE尝试将所有内容之间的所有内容加载到最后一个右括号之间。要处理错误的行为，您只需先声明EOT并附加一个问号。问号让IE误认为字符串的其余部分是查询字符串并只加载EOT文件。其他浏览器遵循规范并根据src级联和格式提示选择所需的格式。

浏览器兼容性：

Safari 5.03，IE 6-9，Firefox 3.6-4，Chrome 8，iOS 3.2-4.2，Android 2.2-2.3，Opera 11

要生成字体工具包，您应该使用fontsquirrel。

css font-face在IE中不起作用

1 个答案: