动态添加字体表面不起作用

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中有一个特殊的函数用于添加名为insertRule()的CSS规则，首先在<style></style>标记中添加head（无需从JS中执行），然后添加此代码：

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