1

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

/* 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"
      }
  }

}

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

内容安全政策

我添加了解决我的第二个问题：

web_accessible_resources

但我还没有成功。

4

1 回答 1

0

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

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

Y5UEw0lE80llgEseQY3FEmqw.woff2

于 2017-11-17T19:24:38.830 回答