这个问题在这里已有答案:
我正在尝试在内容脚本端使用带有我的扩展名的google字体 - 我已经下载并从扩展目录加载的Noto字体工作(它也在web_accessible_resources中声明)并且在ShadowDOM中正常工作但谷歌字体没有“T
我正在将这个样式文本注入头部:
var styleNode = document.createElement("style");
styleNode.type = "text/css";
styleNode.textContent =
"@font-face { font-family: Noto Serif; src: url('" +
browser.extension.getURL("NotoSerifCJKjp-SemiBold.otf") +
"') format('opentype'); } @font-face { font-family: Poppins; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); }";
document.head.appendChild(styleNode);
我也尝试过
@import url("https://fonts.googleapis.com/css?family=Poppins");
在影子dom风格,但也没有工作
添加字体作为链接工作,不明白为什么:
var linkNode = document.createElement("link");
linkNode.type = "text/css";
linkNode.rel = "stylesheet";
linkNode.href = "//fonts.googleapis.com/css?family=Poppins";
document.head.appendChild(linkNode);
也可以这样做:
<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">