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

【问题标题】：Fontawesome + Chrome extension - fa-solid-900.woff2 not loadingFontawesome + Chrome 扩展 - fa-solid-900.woff2 未加载
【发布时间】：2021-09-10 12:36:44
【问题描述】：

我正在整理一个包含使用 FontAwesome 图标的 Chrome 扩展程序。

我找到了 other posts 让它工作，替换它的 @font-face 部分。

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

我有一个捆绑 fontawesome 和内容 css 的 gulp 构建过程，以及来自 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:;"
    }
}

【问题讨论】：

确保在 chrome://extensions 页面和网页选项卡上重新加载扩展。
是的，这是标准的（我还没有设置任何自动重新加载/刷新机制，所以现在是全手动按钮混搭）。

标签： css google-chrome-extension fonts font-awesome

【解决方案1】：

Sofoa..

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

在本地 IIS 中打开测试页面，使其像普通网站一样提供服务，输入http://localhost:*/* 的 URL 匹配，它就可以正常工作了。

【讨论】：