Fontawesome + Chrome 扩展 - fa-solid-900.woff2 未加载

Question

我正在整理一个 Chrome 扩展，其中包括使用 FontAwesome 图标。

我发现 other posts 让它工作，更换 @font-face 部分。

这适用于 fa-brands-400.woff2 和 fa-regular-400.woff2 文件（我认为），但控制台仍在抛出关于 fa-solid-900.woff2 的问题。

我有一个 gulp 构建过程，其中捆绑了 fontawesome 和内容 css，以及来自 node_modules...

的字体文件的基本副本

gulp.task('content-css', function () {    
    return gulp.src([
            'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
            'src/content.css'
        ])
        .pipe(concat('content.css'))
        .pipe(cleanCss())
        .pipe(gulp.dest('build'));
});

gulp.task('fonts', function () {    
    return gulp.src([
            'node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2',
            'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2',
            'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2'
        ])
        .pipe(gulp.dest('build/resources/webfonts'));
});

一切就绪，看起来不错 - 一旦我手动输入新的 @font-face 条目（手动直到证明有效，然后自动），400 woff 就不再出现在控制台中，但是 900还在给我一些三角帆。

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("chrome-extension://__MSG_@@extension_id__/resources/webfonts/fa-solid-900.woff2") format("woff2"); }
@font-face {
   font-family: 'Font Awesome 5 Brands';
   font-style: normal;
   font-weight: 400;
   font-display: block;
   src: url("chrome-extension://__MSG_@@extension_id__/resources/webfonts/fa-brands-400.woff2") format("woff2"); }
@font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
   font-display: block;
   src: url("chrome-extension://__MSG_@@extension_id__/resources/webfonts/fa-regular-400.woff2") format("woff2"); }

更新：

图标在弹出窗口中工作正常，但内容杂乱有问题。我认为清单有些不对？

{
    "manifest_version": 3,
    "name": "Blah",
    "version": "0.0.1",
    "description": "...",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "content_scripts": [
        {
            "matches": [
                "https://*/*",
                "file:///*/test.html"
            ],
            "js": [
                "content.js"
            ],
            "css": [
                "content.css"
            ]
        }
    ],
    "permissions": [
        "alarms",
        "storage"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
    },
    "web_accessible_resources": [
        {
            "resources": [
                "resources/webfonts/*",
                "content.css"
            ],
            "matches": ["<all_urls>"]
        }
    ],
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'; font-src 'self' data:;"
    }
}

Answer 1

桑福亚..

好吧，我生活中所有的痛苦都是由提供本地文件造成的。设置都很好，只是它不喜欢为 file:///... 或任何类似的服务提供资源。我使用的是本地测试页 (test.html)。

在本地 IIS 中调整测试页面，使其像普通网站一样提供服务，放入 URL 匹配 http://localhost:*/*，它工作正常。

Fontawesome + Chrome 扩展 - fa-solid-900.woff2 未加载

Fontawesome + Chrome extension - fa-solid-900.woff2 not loading

css

google-chrome-extension

fonts

font-awesome