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

Question

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

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);