Firefox 扩展自定义字体 [英] Firefox extension custom fonts

问题描述

我正在使用 Firefox Add-on SDK 创建扩展并执行 PageMod.此代码在 main.js 中.

I am using the Firefox Add-on SDK to create an extension and am performing a PageMod. This code is in 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 虽然字体文件没有加载到页面中.

my css/font-awesome.css gets loaded into the page although the font files do not.

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

The fonts folder is in the data folder of my extension. Could someone please explain how I can load custom fonts into a webpage using PageMod!

推荐答案

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

If you look into the console messages, this is what you should see:

可下载字体:不允许下载(字体系列:FontAwesome"样式:正常重量:正常拉伸:正常 src 索引:0):URI 错误或不允许跨站点访问

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.

Unfortunately for you, web fonts are subject to the same-origin policy which can only be relaxed via CORS. This means that there is no way to load the font file from an extension URL as there is no way to use CORS there.

这让您有两个选择:

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

1. You host the font on a web server with proper CORS headers or use some existing font hosting.
2. You encode the font as a data: URI. There is a number of data: URI generators available, e.g. this one.

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

IMHO the second solution is the preferable one as your extension won't be dependent on any web servers, especially not third-party web servers. Also, it won't introduce any delays caused by font downloading. I tried it and it worked fine:

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

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

Side-note: You don't need the full backwards compatibility dance in a Firefox extension, it's sufficient to have the font in the WOFF format.

这篇关于Firefox 扩展自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！