Question

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

Answer 1

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

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

有关它的更多信息here。

Answer 2

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

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

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

Adding @font-face stylesheet rules to chrome extension

我的代码：

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/*",
    ...
    ]

Answer 3

只需使用相对网址即可。它更简单，更清洁，是正确的事情™：

@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
}

我知道这个问题已经过时了，但它在Google上取得了最好的成绩，并且接受的答案效率低下。

编辑：似乎其他人的结果好坏参半。我应该提一下，在Content Scripts中使用它可能不起作用。我在Popup Scripts中对此进行了测试，效果很好。

Answer 4

老问题，但我认为这是最好的解决方案：

Firefox extension custom fonts

它同样适用于chrome扩展，因为您不是指向字体文件，而是在CSS中包含字体的base64编码版本。

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

4 个答案: