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

Question

通过chrome-extension添加@ font-face样式表规则的推荐方法是什么？问题是字体嵌入的url位于扩展内,所以我必须在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

您还可以在manifest.json中指定扩展使用的任何其他内容web_accesible_resources.文件在这里.

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

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

并在你的CSS中更正网址:

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