Question

我正在使用IE的stylesheet.addRule（）方法添加@ font-face规则。但是，@符号是该方法的'selector'参数的不允许字符，所以我得到一个'无效参数'错误。

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

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

我已经尝试设置style元素的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);

在IE 8中动态添加@ font-face规则

1 个答案: