Question

我正在尝试将字体添加到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。

当脚本加载时我得到：

可下载字体：不允许下载（font-family：“FontAwesome”样式：正常权重：正常拉伸：正常src索引：2）：不允许错误的URI或跨站点访问来源：资源：//extension_id/fonts/fontawesome-webfont.ttf？v = 4.0.3 font-awesome.min.css

Answer 1

参见文档：PageMod > Options＆gt; ContentStyleFile

您目前无法在以这种方式加载的样式表中使用相对URL。例如，考虑一个引用外部文件的CSS文件，如下所示：

background: rgb(249, 249, 249) url('../../img/my-background.png') repeat-x top center;

如果使用contentStyleFile附加此文件，则找不到“my-background.png”。

作为解决方法，您可以构建“data”目录中文件的绝对URL，并构建一个在规则中嵌入该URL的contentStyle选项。例如：

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规则之外的所有CSS规则。对于需要引用存储在附加组件“data”目录中的“my-pic.jpg”的规则，它使用contentStyle。

Answer 2

CSS的资产与加载的CSS相关。所以你不需要使用绝对路径，而只需要使用相对路径。

如何将外部资源/字体添加到Firefox扩展中？

2 个答案: