将@ font-face样式表规则添加到chrome扩展名 [英] Adding @font-face stylesheet rules to chrome extension

问题描述

通过Chrome扩展程序添加@ font-face样式表规则的建议方式是什么？问题是，font embed的url位于扩展内部，所以我必须在javascript中使用 chrome.extension.getURL 。

What is the recommended way to add a @font-face stylesheet rule through a chrome-extension? The problem is that the url of the font embed is located from within the extension, so I must do it in javascript in order to use chrome.extension.getURL.

我通过内容脚本尝试了 document.styleSheets [0] .addRule ，但是没有工作。

I have tried document.styleSheets[0].addRule through a content-script, but that did not work. To clarify, I also have the font listed under web_accessible_resources.

推荐答案

注入< style> / code>节点，在您的内容脚本。像这样：

Inject a <style> node, in your content-script. Something like so:

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);

这篇关于将@ font-face样式表规则添加到chrome扩展名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！