javascript - 动态添加的字体不工作

Question

fontFaceString = "@font-face {font-family: 'Lobster';font-style: normal;font-weight: normal;src:url('../../fonts/new_fonts/LOBSTER/Lobster-regular.ttf');}";

var newStyle = document.createElement('style');
newStyle.appendChild(document.createTextNode(fontFaceString));
document.head.appendChild(newStyle);

我必须动态添加多种字体。我只是想用上面的代码片段添加一种字体，它被添加到样式标签但没有正确呈现。

Answer 1

在JS中有一个添加CSS规则的特殊函数叫做insertRule() , 先加 <style></style> (不需要从 JS 做)在你的 head标记，然后添加此代码:

var sheet = window.document.styleSheets[0];
sheet.insertRule("@font-face {font-family: 'Lobster';font-style: normal;font-weight: normal;src:url('../../fonts/new_fonts/LOBSTER/Lobster-regular.ttf');}", sheet.cssRules.length);