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

Question

通过 chrome 扩展添加 @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.jsonweb_accesible_resources部分中指定您的扩展使用的任何其他内容。文档在这里。

将此添加到您的 manifest.json 文件中：

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

并且在你的 css 中更正 url：

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