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;
}

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

Answer 1

如果查看控制台消息，您应该看到：

可下载字体：不允许下载（font-family：＆＃34; FontAwesome＆＃34;样式：正常权重：正常拉伸：正常src索引：0）：不允许错误的URI或跨站点访问

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

这为您提供了两个选项：

您可以在具有正确CORS标头的Web服务器上托管该字体，或使用现有的字体托管。
您将字体编码为data: URI。存在许多数据：可用的URI生成器，例如， this one。

恕我直言，第二种解决方案是首选解决方案，因为您的扩展程序不依赖于任何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格式。

Answer 2

我认为您需要在url个字段中使用绝对路径。因此，找出seld.data.url('fonts')（与console.log类似的内容）（路径应该类似于resource://weraweraer-at-jetpack/data/fonts），然后更新您的网址以使用该路径

我很确定这应该有效，因为资源网址没有安全限制。在此处查看此页：https://developer.mozilla.org/en-US/docs/Chrome_Registration#resource

它说：

注意：没有任何安全限制阻止Web内容在resource：URIs中包含内容，因此请注意您在那里可见的内容。

Answer 3

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

src: 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/...

Firefox扩展自定义字体

3 个答案: