Question

查看此代码：

http://jsbin.com/anecor/1

它基本上做的是使用两个不同的'font-family'来呈现两个不同的文本

使用文本＃1，字体数据将与文档一起加载。

使用文本＃2，字体数据会在页面加载后2秒附加到head标记。

如果您尝试使用任何现代浏览器中的代码（我已经尝试过Chrome，Firefox和iOS Safari），它将会正常工作，两种字体的样式都会正确设置;但是，如果你在IE 10上运行它，第二种字体将无法呈现。

没有错误消息，也没有线索为什么它会停止工作。

另外，我很确定（令人惊讶的是）它可以在IE 9上运行，因为我正在使用该浏览器进行大部分测试;但后来我最近升级到Windows 8并且只有IE 10 atm，如果有人可以查看它并告诉我它在IE 9上工作/失败，我们将不胜感激。

有什么想法吗？解决方法？

Answer 1

解决方案很简单。像这样加载字体：

var css = '@font-face {...}';
var s = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(s);
s.setAttribute('type', 'text/css');
if (s.styleSheet) { // IE
    s.styleSheet.cssText = css;
} else {
    s.appendChild(document.createTextNode(css));
}

Answer 2

发现这是IE上的一个错误（并且在IE 11上也不起作用，所以这里我们有一个会持续很长时间的错误。）

还制作了一种解决方法，但它非常复杂（但确实有效）。如果有人有兴趣，请给我留言。

IE 10不加载嵌入式base64字体

2 个答案: