Question

我一直在努力解决这个问题，所以认为现在是时候发帖了，因为没有一个类似的问题有所帮助。

到目前为止，我已尝试过一些事情。字体很棒的版本（5.0.9）

1）在contentcript中包含 fontawesome-all.min.css ，并修改css文件中的@ font-face网址以适应chrome扩展路径。

"content_scripts": [
{
  "matches": ["http://*/*", "https://*/*"],
  "js": ["contentscript.js"],
  "css": ["assets/css/fontawesome-all.min.css"]
}
],
"permissions": [
    "cookies", "tabs", "notifications", "storage", "identity", "<all_urls>"
],
 "web_accessible_resources": [
    "modal.html", "style.css", "assets/images/*", "assets/css/*", "assets/webfonts/*", "assets/js/*"
]

以下是其中一个@ font-face网址的示例。

@font-face{font-family:Font Awesome\ 5 Pro;font-style:normal;font-weight:300;src:url(chrome-extension://<extension_id>/assets/webfonts/fa-light-300.woff2) format("woff2")}

当我执行此操作时，当我查看“投放网络”标签时，似乎根本没有加载 fontawesome-all.min.css 。

2）在contentscript.js中包含css文件（加载CSS但不加载图标字体）

// Add Fontawesome library
    var link = document.createElement("link")
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = chrome.runtime.getURL('assets/css/fontawesome-all.min.css');
    shadow.appendChild(link);

如上所述，这显示了＆＃34; square＆＃34;图标，但不是正确的。我还可以看到css文件已加载到“网络”选项卡中，但仍未加载图标字体。为什么呢？

我在Shadow DOM中加载它，以防它与它有任何关系..

尝试从内容脚本加载字体文件，但仍然无法正常工作，我认为它可能与资源不在＆＃34; web_accessible_resources＆＃34下有关;但是他们是......所以我迷失了。

var fa = document.createElement('style');
    fa.type = 'text/css';
    fa.textContent = '@font-face { font-family: Font Awesome\ 5 Brands; font-style: normal; font-weight: 400; src: url('
        + chrome.extension.getURL('assets/webfonts/fa-brands-400.woff2')
        + ')}';
    shadow.appendChild(fa);

Chrome扩展程序：字体很棒，不加载字体文件

0 个答案: