Firefox扩展自定义字体
我正在使用Firefox附加SDK来创build扩展，并执行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加载自定义字体到网页！
如果你看看控制台的消息，这是你应该看到的：
可下载的字体：不允许下载（font-family：“FontAwesome”风格：正常体重：正常舒展：正常src索引：0）：不允许URI或跨网站访问
不幸的是，networking字体受制于只能通过CORS放松的同源策略。 这意味着无法从扩展URL加载字体文件，因为在那里没有办法使用CORS。
这给你两个select：
- 您可以使用适当的CORS标头在Web服务器上托pipe字体，或者使用一些现有的字体托pipe。
- 您将字体编码为data：URI 。 有许多数据：URI生成器可用，例如这个 。
恕我直言，第二个解决scheme是更好的一个，因为你的扩展将不依赖于任何networking服务器，特别是不是第三方networking服务器。 而且，它不会引入字体下载造成的任何延迟。 我试了一下，它工作正常：
@font-face { font-family: 'FontAwesome'; src: url('data:application/octet-stream;base64,d09GRgAB...') format('woff'); font-weight: normal; font-style: normal; }
注意：在Firefox扩展中，你不需要完全的向后兼容性，只要WOFF格式的字体就足够了。
我认为你需要在这些url字段中使用绝对path。 因此，找出seld.data.url('fonts') （通过像console.log这样的path）（path应该是类似resource://weraweraer-at-jetpack/data/fonts ），然后更新你的url使用该path。
我很确定这应该工作，因为资源url没有安全限制。 请参阅此页面： https ： //developer.mozilla.org/en-US/docs/Chrome_Registration#resource
它说：
注意：没有任何安全限制可以阻止网页内容在资源：URI处包含内容，因此请注意您在此处显示的内容。
