将@font-face样式表规则添加到Chrome扩展程序

Question

如何通过Chrome扩展程序添加@font-face样式表规则是推荐的方法？问题是字体嵌入的url位于扩展程序中，因此我必须在JavaScript中使用chrome.extension.getURL来实现。

我已经尝试了通过内容脚本使用document.styleSheets[0].addRule，但没有成功。需要澄清的是，我还将该字体列在了web_accessible_resources中。

- badunk

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

- Brock Adams

---

谢谢，这最终对我有用了！如果使用Font Awesome字体，只需要链接到.woff文件即可支持Chrome。 - mattdlockyer

最终我也解决了我的问题。我正在使用Shadow Dom，而我的@font-face规则在CSS中。将其提取出来并直接添加到dom中解决了问题。 - officert

这种方式相当直接简单。谢谢！它运行得很好。 - Ashutosh Tripathi

Answer 2

您还可以在manifest.json中的web_accessible_resources部分指定扩展程序使用的任何其他内容。文档在这里。

将以下内容添加到您的manifest.json文件中：

```html "web_accessible_resources": [] ```

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

同时在你的CSS中修正URL：

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

- Max Podriezov

---

简单直观 +1 - Ruwanka De Silva

很好的建议，简洁明了，最重要的是没有脚本。干杯。 - Davor Badrov

如果你想知道为什么那个奇怪的字符串有效：https://developer.chrome.com/extensions/i18n - Enrique