23

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

4

4 回答 4

45

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

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

更多关于它的信息。

于 2010-12-27T00:43:42.643 回答
22

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

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

对于 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/*",
    ...
    ]
于 2014-04-03T15:46:18.177 回答
-2

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

Firefox 扩展自定义字体

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

于 2014-08-06T21:59:55.417 回答
-3

只需使用相对 URL。它更简单、更清洁，而且是正确的事™：

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

我知道这个问题很老，但它是谷歌的最高结果，并且接受的答案效率低下。

编辑：似乎其他人对此的结果喜忧参半。我应该提到它在内容脚本中使用时可能不起作用。我已经在 Popup Scripts 中对此进行了测试，并且效果很好。

于 2012-10-24T22:39:39.250 回答