Firefox 扩展自定义字体

IT技术 javascript fonts firefox-addon firefox-addon-sdk
2021-03-04 20:21:57

我正在使用 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 将自定义字体加载到网页中！

3个回答

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

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

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

这让您有两个选择：

  1. 您将字体托管在具有适当 CORS 标头的 Web 服务器上，或使用一些现有的字体托管。
  2. 您将字体编码为data: URI。有许多数据： 可用的 URI 生成器，例如这个。

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

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

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

似乎没有工作@font-face { font-family: 'FontAwesome'; src: url('data:application/octet-stream;base64,ARs...') format('embedded-opentype'); font-weight: normal; font-style: normal; }。我做错了什么吗？
2021-04-18 20:21:57
@Noitidart：坦率地说，我不知道这如何与非 HTTP 方案配合使用。这是一个启用 CORS 的请求，唯一实现 CORS 处理的通道是 HTTP 通道。可能也可以使用自定义通道，但看起来在这里使用它需要比我现在更好地了解 Gecko 内部结构。
2021-04-20 20:21:57
@Noitidart：我认为chromeURL 有同样的问题，至少根据一些谷歌搜索结果。并不是说它是 SDK 扩展的可行解决方案。
2021-04-30 20:21:57
什么使它成为一个chrome路径，并设置contentaccessible=yes在chrome.manifest？
2021-05-03 20:21:57
@AndrewM：请参阅pastebin.com/P0ttkDmw - 这是我用于测试的完整 CSS 文件，它对我来说工作正常。
2021-05-09 20:21:57

我认为您需要在这些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 内容在资源中包含内容：URI，因此请注意您在那里显示的内容。

“我很确定这应该有效，因为资源 url 没有安全限制” - 好吧，你错了 :)
2021-05-05 20:21:57
@WladimirPalant 你是对的。我证实这不起作用。我尝试将它们设置为chrome.manifest. :(
2021-05-14 20:21:57

我找到的最佳答案在这里：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/...

其它你可能感兴趣的问题
上一篇chrome 支持 document.selection 吗？ 下一篇如何从必须在目标页面范围内运行的代码调用 Greasemonkey 的 GM_ 函数？