Question

我无法在数据URI中使用base64编码的Internet Explorer 8中获取自定义字体。这是我的fon-face css：

@font-face {
    font-family: 'myfont';
    src: url('data:application/x-font-woff;base64,[BASE_64_HERE]'), 
         url('data:font/eot;base64,[BASE_64_HERE]') format('embedded-opentype');
}

它在Chrome中运行良好，但在IE8中无效。

Answer 1

我很确定ie8不支持多个src声明。话虽如此，我也在做同样的事情：

@font-face {
    font-family: 'myfont';
    src: url('data:font/eot;base64,[BASE_64_HERE]') format('embedded-opentype');
 }

它仍然无法在ie8中运行。我想也许是语法问题？我希望别人可以提供帮助。

Answer 2

当我尝试使用不同重量和样式的多个字体文件将它应用于正文字体时，

“[data-uris]在IE 7/8中失败。我找到的解决方案是简单地设置字体粗细和字体@ font-face声明中的样式。简单。“

来源：https://medium.com/what-i-learned-building/2c1de247c94e

Answer 3

IE8的传统@font-face声明是：

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot');
    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');
}

如果要使用嵌入式URI，则必须将@font-face拆分为两个声明：

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

确保所有字体样式（font-style或font-weight）在@font-face声明中都重复。

请参阅http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Answer 4

使用ie8的数据URI有一些限制。根据caniuse.com：

＆＃34;支持仅限于图像和链接资源，如CSS文件，而不是HTML或JS文件。最大URI长度为32KB。＆＃34;

IE8中带有数据URI的@ font-face不起作用

4 个答案: