Firefox 扩展自定义字体

我正在使用 Firefox Add-on SDK 创建扩展并执行 PageMod。这段代码位于main.js.

...
exports.main = function() {
  var pageMod = require("sdk/page-mod");

  pageMod.PageMod({
    include: "*",
    contentScriptWhen: 'end',
    contentStyleFile: [
      self.data.url("css/style.css"),
      self.data.url("css/font-awesome.css")
    ],
    contentScriptFile: [
      self.data.url("js/jquery.js"),
      self.data.url("js/spritzify.js")
    ],
    onAttach: function onAttach(worker) {
      worker.postMessage("Hello World");
    }
  });
};
...

my css/font-awesome.css尽管字体文件没有加载到页面中。

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

字体文件夹位于我的扩展的数据文件夹中。有人可以解释一下如何使用 PageMod 将自定义字体加载到网页中吗？

如果您查看控制台消息，您应该看到以下内容：

可下载字体：不允许下载（字体系列：“FontAwesome”样式：正常粗细：正常拉伸：正常src索引：0）：不允许错误的URI或跨站点访问

不幸的是，网络字体受同源政策的约束，只能通过以下方式放宽CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。这意味着无法从扩展 URL 加载字体文件，因为那里无法使用 CORS。

这给您留下了两个选择：

1. 您可以将字体托管在具有正确 CORS 标头的 Web 服务器上，或者使用某些现有的字体托管。
2. 您将字体编码为数据：URI http://en.wikipedia.org/wiki/Data_URI_scheme。有许多 data: URI 生成器可用，例如this one http://dopiaza.org/tools/datauri/index.php.

恕我直言，第二种解决方案是更好的解决方案，因为您的扩展不会依赖于任何 Web 服务器，尤其是第三方 Web 服务器。此外，它不会引入字体下载造成的任何延迟。我尝试了一下，效果很好：

@font-face {
  font-family: 'FontAwesome';
  src: url('data:application/octet-stream;base64,d09GRgAB...') format('woff');
  font-weight: normal;
  font-style: normal;
} 

旁注：您不需要 Firefox 扩展中的完全向后兼容性，拥有 WOFF 格式的字体就足够了。