在Shadow DOM中使用Google字体 [英] Using Google Fonts with Shadow DOM

问题描述

我正在尝试在内容脚本方面使用带有扩展名的google字体-我从扩展名目录下载并加载的Noto字体有效(也已在web_accessible_resources中声明)，并且在ShadowDOM中可以正常工作，但是谷歌字体不

I'm trying to use a google font with my extension on the content script side - the Noto font I have downloaded and loading from the extension directory works (it is also declared in web_accessible_resources) and works fine in the ShadowDOM but the google font doesn't

我正在将此样式文本注入头部:

I'm injecting this style text into the head:

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风格，但这也不起作用

in the shadow dom style but that didn't work either

推荐答案

将字体添加为链接有效，不知道为什么:

Adding the fonts as a link worked, no idea why:

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">

按照 Google字体不会加载

这篇关于在Shadow DOM中使用Google字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！