2

我无法在数据 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 中不起作用。

4

4 回答 4

2

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

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

它在ie8中仍然不起作用。我在想也许是语法问题？我希望其他人可以提供帮助。

于 2013-06-28T09:45:59.200 回答
0

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

于 2014-12-02T15:56:58.540 回答
0

“[data-uris] 在 IE 7/8 中失败，当我尝试使用多个字体文件为不同的粗细和样式将它应用到正文字体时。我找到的解决方案是简单地设置字体粗细和字体样式两个@font-face 声明。简单。”

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

于 2013-12-20T21:13:12.687 回答
0

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

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

于 2016-01-15T09:02:52.753 回答