如何在内容脚本中的 Chrome 扩展上使用 @font-face答案

【问题标题】：How to use @font-face on a Chrome Extension in a Content Script如何在内容脚本中的 Chrome 扩展上使用 @font-face
【发布时间】：2011-05-30 23:11:09
【问题描述】：

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

【问题讨论】：

标签： html google-chrome css google-chrome-extension font-face

【解决方案1】：

这里是如何在 css 中获取本地路径：

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

更多信息here。

【讨论】：

在某些 Chrome 版本上存在一个错误，导致此功能无法正常工作。快速修复：使用硬编码的扩展 ID 而不是“MSG_@@extension_id”。不幸的是，在本地测试时它不起作用。
别忘了给developer.chrome.com/dev/extensions/…添加字体！！

【解决方案2】：

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

Firefox extension custom fonts

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

注意："css": [...] 进入 "content_scripts": [...]

【解决方案4】：

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

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

我知道这个问题很老，但它是 Google 上的顶级结果，并且接受的答案效率低下。

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

【讨论】：

@Layke 路径是相对于 CSS 文件位置的。我已经简化了示例，因此您可能仍需要指定 format()。
这个不行。它尝试在运行的实际网页内容脚本上查找资源。
这不适用于内容脚本，它只适用于弹出式浏览器操作。
问题是专门关于内容脚本的，这不起作用。
在我做出这个答案很久之后，问题的标题似乎被编辑了。