我正在使用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;
}
解决方法
如果您查看控制台消息,您应该看到：
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格式的字体即可.