为什么我的 Firefox Addon 中的 page-mod contentStyle font-face 规则不起作用？ [复制]答案

【问题标题】：Why doesn't my page-mod contentStyle font-face rule in Firefox Addon work? [duplicate]为什么我的 Firefox Addon 中的 page-mod contentStyle font-face 规则不起作用？ [复制]
【发布时间】：2014-02-20 00:55:49
【问题描述】：

我正在尝试使用 Firefox Addon SDK 中的 page-mod 模块将字体注入页面。这是我构造的字符串：

var fontString = "@font-face{" +
    "font-family:'Glyphicons Halflings';" +
    "src:url(" + data.url('fonts/glyphicons-halflings-regular.eot') + ");" +
    "src:url(" + data.url('fonts/glyphicons-halflings-regular.eot') + "?#iefix) format('embedded-opentype')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.woff') + ") format('woff')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.ttf') + ") format('truetype')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.svg') + "#glyphicons-halflingsregular) format('svg');}";

我在创建字符串后将其记录到控制台并输出：

@font-face{font-family:'Glyphicons Halflings';src:url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.eot);src:url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.woff) format('woff'),url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular) format('svg');}

我已经测试了这个输出 CSS 是否可以通过将其复制并粘贴到面板页面中来工作，并且可以正常工作。资源网址是正确的。但是，当我尝试将其作为 contentStyle 规则注入其他页面时，页面无法识别该字体。这是我的代码：

require("sdk/page-mod").PageMod({
    include: "*",
    contentScriptFile: [...],
    contentStyle: fontString,
    onAttach: function (worker) {
        console.log('Attached');
    }
});

我已验证在每个页面加载后都会调用 onAttach。此外，我使用同一页面 mod 注入的所有脚本（为简洁起见，我没有将它们包含在代码 sn-p 中）都被注入并且工作正常。另外，如果我将fontString 更改为body{background-color:red;} 之类的简单名称，它也可以正常工作。为什么页面无法识别字体？

【问题讨论】：

您是否看到与您的代码相关的任何 CSS 错误或警告？或者，您是否尝试过将您的 css 放入单独的 css 文件并使用 contentStyleFile？我认为您不需要 data.url 来获取完整的资源 url，相对 url 应该可以工作。
不，相对 URL 在 contentStyleFile 中不起作用。从page-mod API page，>您目前不能在以这种方式加载的样式表中使用相对 URL。例如，考虑一个引用如下外部文件的 CSS 文件： background: rgb(249, 249, 249) url('../../img/my-background.png') repeat-x top center;如果您使用 contentStyleFile 附加此文件，将找不到“my-background.png”。作为一种解决方法，您可以在“数据”目录中构建一个文件的绝对 URL

标签： javascript css firefox firefox-addon firefox-addon-sdk

【解决方案1】：

这是一个 XSS 限制。如果可以将字体数据转换为数据 uri data:，那么这可能会起作用。

否则您可能需要file a bug，我们可以找人处理。

【讨论】：

【解决方案2】：

暂时，虽然这是一个错误，但试试这个方法，使用组件所以在顶部转到var {Cc, Cu, Ci} = require('chrome');，然后将它粘贴到某个地方：

var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var ios = Cc['@mozilla.org/network/io-service;1'].getService(Ci.nsIIOService);

var css = var fontString = "@font-face{" +
    "font-family:'Glyphicons Halflings';" +
    "src:url(" + data.url('fonts/glyphicons-halflings-regular.eot') + ");" +
    "src:url(" + data.url('fonts/glyphicons-halflings-regular.eot') + "?#iefix) format('embedded-opentype')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.woff') + ") format('woff')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.ttf') + ") format('truetype')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.svg') + "#glyphicons-halflingsregular) format('svg');}";

//var cssEnc = 'data:text/css;base64,' + window.btoa(css);
var cssEnc = encodeURIComponent(css);
var cssUri = makeURI('data:text/css,' + cssEnc);
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);

要取消注册样式表，请执行此操作sss.unregisterSheet(cssUri, sss.USER_SHEET);

【讨论】：