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

Question

我正在使用 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（它不再显示）

提前致谢！

p.s。制作 css 文件并将其包含在我的清单中是否是更好的方法？

Answer 1

您是否正在尝试构建用户可以更改的动态文本框？如果是这样，此答案将指导您创建一个

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

HTML: 空 div

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

JS

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

Answer 2

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

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

Answer 3

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

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

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

set font-face/font-family using setAttribute (javascript)

html

javascript

css

font-face

google-chrome-extension