如何在内容脚本中的Chrome扩展程序中使用@ font-face

Question

由于我无法chrome.extension.getURL()在CSS文件上使用,如何将@ font-face与本地字体文件一起使用？

Answer 1

以下是如何在css中获取本地路径:

body {
  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}

更多关于它的信息.

Answer 2

这个解决方案最终对我有用:

它将样式节点注入到内容脚本的文档中.

对于Font Awesome,你只需要Chrome的.woff src.

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

我的代码:

var fa = document.createElement('style');
    fa.type = 'text/css';
    fa.textContent = '@font-face { font-family: FontAwesome; src: url("'
        + chrome.extension.getURL('lib/fa/fonts/fontawesome-webfont.woff?v=4.0.3')
        + '"); }';
document.head.appendChild(fa);

在你的清单中:

"css":[
    "lib/fa/css/font-awesome.min.css",
    ...
    ]

"web_accessible_resources":[
    "lib/fa/fonts/*",
    ...
    ]