我正在开发一个Google Chrome扩展，它显示在特定的网站上。我想在我的Chrome扩展中使用Fontawesome。
当我尝试加载字体时，会发生错误GET chrome-extension://invalid/ net::ERR_FAILED
在样式表中，使用@font-face包含了Web字体，像这样。
src: url('chrome-extension://__MSG_@@extension_id__/Fonts/fontawesome-webfont.eot?v=4.7.0');
我也试图直接嵌入我的扩展ID，但是它并没有起作用。
我的manifest.json文件：
"web_accessible_resources": ["Fonts/*.*", "*.ttf", "*.eot", "*.svg", "*.woff", "*.woff2"],
如何解决这个问题？
我想对@Thomas Kekeisen的答案进行补充，提供FontAwesome版本5（当前版本为5.13.0）的更新答案。
另外，我希望尽可能保持简洁，因此：
woff2，因为没有使用其他格式的理由。regular样式（这是他们的5种样式之一）。 因此，如果您使用的是woff2以外的格式或regular以外的样式，请以相同的方式应用以下步骤。
所以，为了在Chrome扩展中使用FontAwesome，请按照以下步骤操作：
解压.zip文件，只提取所需的内容，例如：
(a) css/fontawesome.min.css
(b) css/regular.min.css
(c) webfonts/fa-regular-400.woff2
注意：如果您使用css/all.min.js，它将替换(a)和(b)。
可选，可以让我们的生活更轻松：
在Chrome扩展根文件夹下创建css和webfonts文件夹以模仿FontAwesome结构，并将上述文件移动到这些文件夹中。
您的文件夹结构应如下所示：
your-extension
|- css
|- fontawesome.min.css
|- regular.min.css
|- webfonts
|- fa-regular-400.woff2
在 css/regular.min.css 文件中，覆盖（是的，只需要覆盖）@font-face 媒体样式，使用以下代码：
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 400;
font-display:block;
src: url("chrome-extension://__MSG_@@extension_id__/webfonts/fa-regular-400.woff2");
}
注意：我再次提醒，我将“正常”样式作为示例，请确保在使用其他样式时，@font-face.src属性具有正确的值。
将您的manifest.json更新如下：
{
...
"content_scripts": [{
...
"css": [
"css/fontawesome.min.css",
"css/regular.min.css",
]
...
}],
...
"web_accessible_resources": [
...
"css/fontawesome.min.css",
"css/regular.min.css",
"webfonts/fa-regular-400.woff2", // or: "webfonts/*"
]
}
注意：需要将.css路径添加到"content_scripts"和"web_accessible_resources"中。
<link href="/myFolder/css/all.min.css" rel="stylesheet">
如果你只想在弹出窗口中使用它，那么你不需要在manifest.json中添加任何内容。更多解释，请参见文档。 - GoodOldGuyFontAwesome.otf，fontawesome-webfont.eot，fontawesome-webfont.svg，fontawesome-webfont.ttf，fontawesome-webfont.woff，fontawesome-webfont.woff2），并保存在fonts/目录下。font-awesome.min.css文件，并将该文件中的所有URL替换为chrome-extension://__MSG_@@extension_id__/fonts/[...]。manifest.json文件：{
...
"content_scripts": [
{
...
"css": [
"css/font-awesome.min.css",
...
]
...
}
],
...
"web_accessible_resources": [
...
"fonts/FontAwesome.otf",
"fonts/fontawesome-webfont.eot",
"fonts/fontawesome-webfont.svg",
"fonts/fontawesome-webfont.ttf",
"fonts/fontawesome-webfont.woff",
"fonts/fontawesome-webfont.woff2",
]
}
以上方法均无效。可能是因为这些答案过时了，它们参考的是较老版本的 Font Awesome。 当我发现 Font Awesome 6 的官方网站上推荐的方法 后，问题得到解决。
css/all.css，css 是您刚刚提取的文件夹中的一个文件夹<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
{
"manifest_version": 2,
"content_scripts": [
{
"js": ["fontawesome.js"]
}
],
}
Refused to load the font 'https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff' because it violates the following Content Security Policy directive: "font-src https://twitter.com https://*.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'"。 - voidcurl -o fontawesome.js "https://use.fontawesome.com/840a321d95.js"
然后将其添加到您需要的位置。
<script src="fontawesome.js"></script>
Refused to load the font 'https://use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff' because it violates the following Content Security Policy directive: "font-src https://twitter.com https://*.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'"。 - void我成功地在我的Chrome扩展程序中使用了Sass来使用Font Awesome。
使用Sass集成FontAwesome 5.11.x到您的Chrome扩展程序的步骤：
SCSS文件夹复制到您的样式文件夹中。webfonts文件夹复制到资产文件夹中。scss/variables.scss文件，并编辑$fa-font-path变量，使其指向您放置webfonts文件夹的位置。您需要使用chrome-extension://__MSG_@@extension_id__/来查找扩展程序文件夹的路径。
对于我来说，字体文件的路径是- extension/chrome/assets/font-awesome，
所以我将$fa-font-path更改为chrome-extension://__MSG_@@extension_id__/assets/font-awesome。
@import "scss/fontawesome.scss"添加到您的主SCSS文件中来导入Font Awesome。此外，在您的主SCSS文件中导入一个或多个样式@import "scss/solid.scss"。如果使用常规字体，则导入regular.scss。执行您的Web扩展程序，然后您应该能够使用Font Awesome图标。
"content_security_policy": "script-src 'self' https://kit.fontawesome.com/[FILE_NAME].js; object-src 'self'"
刷新您的扩展程序。