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

问题描述

我正在使用Firefox附加SDK来创建扩展，并执行PageMod。此代码位于 main.js 中。

  ... 
 exports.main = function（）{
 var pageMod = require（sdk / page-mod）; 
 $ b $ 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 （'fonts / fontawesome-webfont.ttf？v = 4.1.0'）格式（'truetype'），url（'fonts / fontawesome-webfont.svg？v = 4.1 .0＃fontawesomeregular'）格式（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
 
 
 
 
 
 
字体文件夹位于我的扩展的数据文件夹中。可能有人请解释我如何使用PageMod加载自定义字体到网页！
解决方案
如果您查看控制台消息，是你应该看到的：
 
lockquote 
可下载的字体：不允许下载（font-family：FontAwesome风格：普通体重：普通拉伸：正常的src索引：0）：错误的URI或跨网站访问不允许
 
 
不幸的是，网页字体是相同的 - 原始政策只能通过 CORS 放松。这意味着没有办法从扩展URL加载字体文件，因为在那里没有办法使用CORS。 
 
 
这给你两个选择： p> 
 
 
 
 
您可以使用适当的CORS标头将字体托管在Web服务器上，或使用一些现有的字体托管。您将字体编码为 data：URI 。有许多数据：可用的URI生成器，例如这一个。
 
 
 
 
 <恕我直言，第二个解决方案是更好的一个，因为你的扩展不会依赖于任何网络服务器，特别是不是第三方网络服务器。而且，它不会引入字体下载造成的任何延迟。我尝试了它，它工作得很好：
  @ font-face {
 font-家庭：FontAwesome; 
 src：url（'data：application / octet-stream; base64，d09GRgAB ...'）format（'woff'）; 
 font-weight：normal; 
 font-style：normal; 
 
 
 
 
 
 
侧记：你不需要完整的向后兼容性Firefox的扩展名，这是足够的字体在WOFF格式。
 
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");
    }
  });
};
...
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;
}
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:

  
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
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.

This leaves you with two options:

You host the font on a web server with proper CORS headers or use some existing font hosting.
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;
} 
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屋！