javascript - 在 IE 8 及更低版本中动态添加 @font-face 规则

Question

我正在使用 IE stylesheet.addRule() 方法添加@font-face 规则。但是，对于该方法的“选择器”参数，@ 符号是不允许使用的字符，因此我收到“无效参数”错误。

s.addrule("@font-face", "font-family: 'Font Name'; src:url('/fonts/font.eot') etc...)";

有没有其他方法可以动态添加这些规则？

我试过设置样式元素的 innerHTML 属性，设置 styleSheet 属性的 cssText 属性，并将文本节点附加到样式元素(这会导致 IE 崩溃)。

还有其他方法可以尝试吗？

Answer 1

设置 cssText 属性确实有效，但您必须在将 @font-face 规则添加到文档之前将样式元素插入到文档中。例如……

var s = document.createElement('style');
s.type = "text/css";
document.getElementsByTagName('head')[0].appendChild(s);
s.styleSheet.cssText = "@font-face {" + rule + "}";

据我所知，完全可以在将样式元素插入页面之前设置其他类型的 CSS 规则，但不能设置 @font-face。

例如...这很好用:

var s = document.createElement('style');
s.type = "text/css";
s.styleSheet.cssText = "body { background: red}";
document.getElementsByTagName('head')[0].appendChild(s);

但这会使 IE 8 及以下版本崩溃:

var s = document.createElement('style');
s.type = "text/css";
s.styleSheet.cssText = "@font-face {" + rule + "}";
document.getElementsByTagName('head')[0].appendChild(s);