火狐扩展：自定义字体

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加载自定义字体到网页中吗？

- mildog8

---

有趣的是，您的问题已经至少有两个重复（https://stackoverflow.com/q/21172670/785541 和 https://stackoverflow.com/q/19808064/785541），两者都没有得到适当的答案。 - Wladimir Palant

Answer 1

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

可下载字体：不允许下载（字体系列：“FontAwesome” style:normal weight:normal stretch:normal src index:0）：URI 错误或禁止跨站点访问

不幸的是，Web 字体受到同源策略的限制，只能通过CORS 放宽。这意味着无法从扩展程序 URL 加载字体文件，因为那里无法使用 CORS。

这给您留下了两个选择：

1. 在 Web 服务器上托管具有适当 CORS 标头的字体，或者使用某些现有字体托管。
2. 将字体编码为 data: URI。有多种 data: URI 生成器可用，例如此工具。

在我看来，第二种解决方案是更可取的，因为您的扩展程序不会依赖任何 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 格式的字体即可。

- Wladimir Palant

---

@Noitidart：我认为chrome URL也有同样的问题，至少根据一些谷歌搜索结果是这样的。但这对于SDK扩展来说并不是一个可行的解决方案。 - Wladimir Palant

@AndrewM：请查看http://pastebin.com/P0ttkDmw - 这是我用于测试的完整CSS文件，对我来说它可以正常工作。 - Wladimir Palant

我正在尝试从我的Firefox插件加载github.com上的图标字体，但GitHub的CSP包括“font-src assets-cdn.github.com”，这使得通过数据URI（“内容被阻止”）加载字体文件变得不可能。顺便说一下，在Chrome中，可以直接加载本地文件，但数据URI解决方案也失败了。在Firefox中，我还没有找到解决方法。@WladimirPalant你知道这里有什么解决办法吗？ - Justineo

@Justineo：在扩展中使用远程下载的字体是一个不好的主意。你应该将它们下载并添加到你的扩展中，作为"data:" URI。 - Wladimir Palant

@Noitidart：坦白地说，我不知道这在非HTTP方案中如何工作。这是一个启用CORS的请求，唯一实现CORS处理的通道是HTTP通道。可能可以使用自定义通道，但是在此处使用它需要比我现在更好地了解Gecko内部。 - Wladimir Palant

Answer 2

我认为你需要在那些url字段中使用绝对路径。因此，找出seld.data.url('fonts')是什么（通过像console.log这样的方式），路径应该类似于resource://weraweraer-at-jetpack/data/fonts，然后更新您的url以使用该路径。

我相信这应该可以工作，因为资源URL没有安全限制。请参见此页面：https://developer.mozilla.org/en-US/docs/Chrome_Registration#resource

它说：

注意：没有安全限制阻止Web内容在resource：URI中包含内容，因此请注意您在那里公开什么。

- Noitidart

---

“我非常确定这应该可以工作，因为资源URL没有安全限制” - 嗯，你错了 :) - Wladimir Palant

@WladimirPalant 您是对的。我已经验证了这个方法不起作用。我试过将它们设置为chrome.manifest中的资源路径。:( - Noitidart

Answer 3

我找到的最佳答案在这里：https://stackoverflow.com/a/39971918/1635421

源代码：url('moz-extension://MSG@@extension_id_/css/fonts/webFonts/font-awesome/fontawesome-webfont.eot?v=4.5.0');

这类似于Chrome的方法： src: url('chrome-extension://MSG@@extension_id_/fonts/...

- jmarch