將@ 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

您還可以在web_accesible_resources部分的manifest.json中指定擴展使用的任何其他內容。 文件在這里 。

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

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

並在你的CSS中更正網址：

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