<分区>
<分区>
我正在尝试将字体添加到 Firefox 扩展中。
我已经成功地使用 PageMode 添加了样式:
pageMod.PageMod({ ...
...
contentStyleFile: [
...
self.data.url('font-awesome.min.css')
],
在我的 CSS 中:
font-family:'FontAwesome';src:url('resource://extension_id/fonts/fontawesome-webfont.eot?v=4.0.3')
其中 extension_id 当然是我的 ID。
当脚本加载时我得到:
可下载字体:不允许下载(字体系列:“FontAwesome”样式:正常重量:正常拉伸(stretch):正常源索引:2):错误的 URI 或不允许跨站点访问 来源:resource://extension_id/fonts/fontawesome-webfont.ttf?v=4.0.3 font-awesome.min.css
最佳答案
参见文档:PageMod > Options > 内容样式文件
您目前不能在以这种方式加载的样式表中使用相对 URL。例如，考虑一个引用外部文件的 CSS 文件，如下所示:
background: rgb(249, 249, 249) url('../../img/my-background.png') repeat-x top center;
如果您使用 contentStyleFile 附加此文件，将找不到“my-background.png”。
作为解决此问题的方法，您可以为“数据”目录中的文件构建一个绝对 URL，并构建一个 contentStyle 选项，将该 URL 嵌入您的规则中。例如:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod").PageMod({
include: "*",
contentStyleFile: data.url("my-style.css"),
// contentStyle is built dynamically here to include an absolute URL
// for the file referenced by this CSS rule.
// This workaround is needed because we can't use relative URLs
// in contentStyleFile or contentStyle.
contentStyle: "h1 { background: url(" + data.url("my-pic.jpg") + ")}"
});
此插件使用一个单独的文件“my-style.css”，使用 contentStyleFile 加载，用于所有 CSS 规则，引用外部文件的除外。对于需要引用存储在插件的“数据”目录中的“my-pic.jpg”的规则，它使用contentStyle。
关于css - 如何将外部资源/字体添加到 Firefox 扩展中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21172670/