使用 setAttribute (javascript) 设置 font-face/font-family答案

【问题标题】：set font-face/font-family using setAttribute (javascript)使用 setAttribute (javascript) 设置 font-face/font-family
【发布时间】：2016-04-11 22:57:10
【问题描述】：

我正在使用这样的 javascript 创建 div 并为其设置样式：

var div = document.createElement("div");
div.setAttribute('style',  'box-shadow: 10px 10px 50px #888888; \
                            background-color: #ffb734; \
                            etc...
                           ');

当我从 chrome 扩展内容脚本插入 div 时，我必须这样做。

如果我已将字体myFont.ttf 下载到同一目录，如何更改字体？

这是我尝试过的：

var div = document.createElement("div");
div.setAttribute('style',  'box-shadow: 10px 10px 50px #888888; \
                            background-color: #ffb734; \
                            @font-face {\
                                font-family: '" + 'openSans' + "'; \
                                src: url('" + 'OpenSans-Semibold.ttf' + "') \
                            } \
                           ');

但这打破了div（它停止显示）

提前致谢！

附言制作一个 css 文件并将其包含在我的清单中是不是更好的方法？

【问题讨论】：

标签： javascript html css google-chrome-extension font-face

【解决方案1】：

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces).

这意味着at-rules 在该上下文中是不允许的。

【讨论】：

谢谢，那么对于这种情况有替代方法吗？
@NoamHacker 你可以使用font 或font-family 属性，就是这样。如果您仅限于 javascript 解决方案，您可能应该查看FontFaceSet interface。

【解决方案2】：

您是否尝试构建用户可以更改的动态文本框？如果是这样，这个答案将指导您创建一个，https://stackoverflow.com/a/8957518/5914723

如果没有，那么这里有一些会修改 div 的 JS。您正在使用此代码、HTML 和 CSS 修改 HTML DOM。 https://jsfiddle.net/Dneilsen22/ohodgo7u/

HTML：空 div

<div id="changeMe"></div>

var changeMe = document.getElementById("changeMe");
changeMe.innerHTML = "You can style me too!";
document.getElementById("changeMe").style.font = "bold 40px serif";

【讨论】：

【解决方案3】：

font-face 应该在外部 css 文件中指定，是的，这是制作 css 文件并将其包含在清单中的更好方法。

顺便说一句，使用+ 而不是\ 将字符串分成多行。后者是not preferred。

【讨论】：