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

【问题标题】：@font-face with data URI in IE8 does not workIE8 中带有数据 URI 的 @font-face 不起作用
【发布时间】：2013-06-20 19:34:07
【问题描述】：

我无法在 Internet Explorer 8 中使用数据 URI 中的 base64 编码自定义字体。这是我的 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 中无法运行。

【问题讨论】：

标签： fonts base64 data-uri

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

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

【讨论】：