javascript – Firefox扩展自定义字体

前端之家收集整理的这篇文章主要介绍了javascript – Firefox扩展自定义字体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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将自定义字体加载到网页中!

解决方法

如果您查看控制台消息,您应该看到:

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

不幸的是,Web字体受制于同源策略,只能通过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格式的字体即可.

猜你在找的JavaScript相关文章