Question

我正在尝试添加图标字体，但有些网页会阻止我的字体，因为我使用的是这样的外部网址：

/* fallback */
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
   font-family: 'Material Icons', sans-serif, monospace, Arial, 
   Helvetica, Verdana, Futura;
   font-weight: lighter;
   font-style: normal;
   font-size: 1.5em;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
 }

控制台错误显示：

拒绝加载字体'data：font / woff; base64，..... ZU ='，因为它违反了以下内容安全策略指令：“default-src'self'* .mozilla.net * .mozilla .org * .mozilla.com“。请注意，'font-src'未明确设置，因此'default-src'用作后备。

我不确定是否可以从外部服务器加载此字体，因此我已下载字体，我正在尝试将其添加到我的附加组件中，但我没有成功。

这是我的根本途径：

- css
  - fonts
     - Material_Icons.woff2
     - msc-icons.css

- manifest.json

我的 Material_Icons.woff2 ：

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('Material_Icons.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons', sans-serif, monospace, Arial, 
  Helvetica, Verdana, Futura;
}

我的 manifest.json ：

  {

  "manifest_version": 2,
  "name": "xxx",
  "version": "1.0",

  "description": "xxx",

  "icons": {
    "48": "icon/msc.ico",
    "98": "icon/msc-x2.ico"
  },

  "content_security_policy": "script-src 'self' 
  https://*.fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-
  Y5UEw0lE80llgEseQY3FEmqw.woff2; object-src 'self'",

  "web_accessible_resources": [
      "./css/fonts/Material_Icons.woff2"
  ],

  "content_scripts": [
      {
          "matches": ["<all_urls>"],
          "js": ["./js/vue.js", "./js/msc-scripts.js"],
          "css": ["./css/msc-styles.css", "./css/fonts/msc-icons.css", 
          "./css/fonts/msc-fonts.css"]
      }
  ],

  "applications": {
      "gecko": {
      "id": "borderify@example.com"
      }
  }

}

我添加了这个来解决我的第一个问题：

content_security_polic

我补充说要解决我的第二个问题：

web_accessible_resources

但我已经没有成功了。

Answer 1

在您的manifest.json中尝试使用您自己的链接更新此行。

 https://*.fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-

Y5UEw0lE80llgEseQY3FEmqw.woff2

如何在我的网络扩展程序上添加图标字体（附加组件，插件）

1 个答案: