Google chrome extension 如何正确地将字体添加到chrome扩展？

字体对于我的自定义脚本chrome扩展不可见

文件夹结构：

assets
-fonts
content-app
manifest.json

manifest.json：

(...)
  "content_scripts": [
    {
      "all_frames": false,
      "js": ["/content-app/runtime.js", "/content-app/polyfills.js", "/content-app/styles.js", "/content-app/main.js"],
      "matches": ["https://*/*"],
      "match_about_blank": true,
      "run_at": "document_idle"
    }
  ],
  "web_accessible_resources": [
    "assets/fonts/icons.ttf",
    "assets/fonts/icons.eot",
    "assets/fonts/icons.svg",
    "assets/fonts/icons.woff"
  ],

scss：

如果我用：chrome打开chrome url-extension://xxxxx/assets/fonts/icons.ttf，文件将被正确下载，因此看起来还可以，但当我向内容脚本添加一些代码时，如：

<span class="icon-equalizer"></span>

然后什么也没发生（我看得出来）' 仅限）。有什么想法吗

由于许多原因，我使用shadowroot，您可以从该元素中找到代码：

#shadow-root
<style>
@font-face{font-family:"icons";src:url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.eot?64agaf");src:url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.eot?64agaf#iefix") format("embedded-opentype"),url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.ttf?64agaf") format("truetype"),url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.woff") format("woff"),url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.svg?64agaf#icons") format("svg") format("svg");font-weight:normal;font-style:normal;font-display:block}[class^='icon-'],[class*=' icon-']{font-family:"icons" !important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-equalizer:before{content:""}
(...)
</style>

#阴影根
@字体面{font-family:“图标”；src:url（“chrome-extension://__MSG_@@extension_id__/assets/font/icons.eot？64agaf）；src:url（“chrome-extension://__MSG_@@extension_id___/assets/font/icons.eot？64agaf#iefix）格式（“嵌入式opentype”），url（“chrome-extension://__MSG_@@扩展名“\u id\u\u/assets/font/icons.ttf？64agaf”）格式（“truetype”），url(“铬-extension://__MSG_@@扩展名“\u id\u\u/assets/font/icons.woff”）格式（“woff”），url（“chrome-extension://__MSG_@@扩展名u id uu/assets/font/icons.svg？64agaf 35; icons“）格式（“svg”）；字体重量：正常；字体样式：正常；字体显示：块}[class^='icon-']，[class*='icon-']{font-family:'icons“！重要信息；speak:never；字体样式：正常；字体重量：正常；字体变体：正常；文本转换：无；行高：1；-webkit字体平滑：抗锯齿；-moz osx字体平滑：灰度}。图标均衡器：在{内容}之前："}
(...)

对于这个确切的任务应该有一些答案（我记得有一个建议使用数据URI），但我想建议一个可能更好的解决方案：将所有UI放在iframe中（只有它的html文件应该在web可访问的资源中公开）然后像在任何普通页面上一样加载里面的所有资源。这样你的字体就不会干扰网页。wOxxOm：是的，我看到了，但我认为我的问题不同（我看不到任何错误等），因为覆盖css有很多问题，我决定使用shadow root，我没有使用iframe（iframe也有问题）@wOxxOm我用shadow root更新了上面的代码，可能会有帮助。对于这个确切的任务，应该有一些答案（我记得有人建议使用数据URI），但我想建议一个可能更好的解决方案：将所有UI放在iframe中（只有它的html文件应该在可访问的web资源中公开）然后像在任何普通页面上一样加载里面的所有资源。这样你的字体就不会干扰网页。wOxxOm：是的，我看到了，但我认为我的问题不同（我看不到任何错误等），因为覆盖css有很多问题，我决定使用shadow root，我没有使用iframe（iframe也有问题）@wOxxOm我用shadow root更新了上面的代码，可能会有帮助

#shadow-root
<style>
@font-face{font-family:"icons";src:url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.eot?64agaf");src:url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.eot?64agaf#iefix") format("embedded-opentype"),url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.ttf?64agaf") format("truetype"),url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.woff") format("woff"),url("chrome-extension://__MSG_@@extension_id__/assets/fonts/icons.svg?64agaf#icons") format("svg") format("svg");font-weight:normal;font-style:normal;font-display:block}[class^='icon-'],[class*=' icon-']{font-family:"icons" !important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-equalizer:before{content:""}
(...)
</style>