javascript - Firefox 扩展自定义字体

Question

我正在使用 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");
    }
  });
};
...

我的 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 将自定义字体加载到网页中!

Answer 1

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

downloadable font: download not allowed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed

不幸的是，网络字体受同源策略的约束，只能通过 CORS 放宽。 .这意味着无法从扩展 URL 加载字体文件，因为无法在那里使用 CORS。

这给您留下了两个选择:

1. 您将字体托管在具有适当 CORS header 的网络服务器上，或者使用一些现有的字体托管。
2. 您将字体编码为 data: URI .有许多数据:可用的 URI 生成器，例如this one .

恕我直言，第二种解决方案更可取，因为您的扩展不会依赖于任何网络服务器，尤其是第三方网络服务器。此外，它不会引入任何由字体下载引起的延迟。我试过了，效果很好:

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

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