Question

通过chrome-extension添加@ font-face样式表规则的推荐方法是什么？问题是字体嵌入的网址位于扩展程序中，因此我必须在javascript中执行以便使用chrome.extension.getURL。

我已经通过内容脚本尝试document.styleSheets[0].addRule，但这不起作用。为了澄清，我还在web_accessible_resources下列出了字体。

Answer 1

在内容脚本中注入<style>节点。像这样：

var styleNode           = document.createElement ("style");
styleNode.type          = "text/css";
styleNode.textContent   = "@font-face { font-family: YOUR_FONT; src: url('"
                        + chrome.extension.getURL ("YOUR_FONT.otf")
                        + "'); }"
                        ;
document.head.appendChild (styleNode);

Answer 2

您还可以在web_accesible_resources部分的manifest.json中指定扩展程序使用的任何其他内容。文档为here。

将其添加到manifest.json文件中：

 "web_accessible_resources": [
    "fonts/*.*",
    "templates/*.html"
 ]

还要更正你的css中的网址：

@font-face {
  font-family: 'MyFont';
  src: url('chrome-extension://__MSG_@@extension_id__/fonts/font.eot') /* ... */;
}

将@ font-face样式表规则添加到chrome扩展

2 个答案: