添加@字体面样式规则的Chrome扩展程序(Adding @font-face stylesheet

什么是透过Chrome扩展添加@字体面样式规则是推荐的方式？ 问题是，字体嵌入的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') /* ... */;
}

文章来源: Adding @font-face stylesheet rules to chrome extension