动态添加的字体不工作

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()，首先在您的 head 中添加 <style></style>（无需从 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);