如何将字体正确添加到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：

    $icomoon-font-family: 'icons' !default;
    $icon-equalizer: '\e912'; 

        @font-face {
          font-family: '#{$icomoon-font-family}';
          src: url('chrome-extension://__MSG_@@extension_id__/assets/fonts/#{$icomoon-font-family}.eot?64agaf');
          src: url('chrome-extension://__MSG_@@extension_id__/assets/fonts/#{$icomoon-font-family}.eot?64agaf#iefix') format('embedded-opentype'),url('chrome-extension://__MSG_@@extension_id__/assets/fonts/#{$icomoon-font-family}.ttf?64agaf') format('truetype'),url('chrome-extension://__MSG_@@extension_id__/assets/fonts/#{$icomoon-font-family}.woff') format('woff'),url('chrome-extension://__MSG_@@extension_id__/assets/fonts/#{$icomoon-font-family}.svg?64agaf##{$icomoon-font-family}') format('svg')
              format('svg');
          font-weight: normal;
          font-style: normal;
          font-display: block;
        }
        
        [class^='icon-'],[class*=' icon-'] {
          font-family: '#{$icomoon-font-family}' !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: $icon-equalizer;
  }
}

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

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

然后什么也没发生（我只能看到“”）。有想法吗？

由于许多原因，我使用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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）