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

Question

由于我无法在CSS文件中使用chrome.extension.getURL()，那么我该如何使用@font-face来加载本地字体文件？

- Tomás Senart

Answer 1

以下是如何在CSS中获取本地路径的方法：

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

关于此更多信息，请点击这里。

- serg

---

在某些Chrome版本上有一个错误阻止了它的工作。 快速解决方法：硬编码使用您的扩展ID而不是“_MSG@@extension_id__”。 糟糕的是，当本地测试时它不会起作用。 - Tomás Senart

不要忘记在https://developer.chrome.com/dev/extensions/manifest.html#web_accessible_resources中添加字体！ - Aleksandr Motsjonov

请在文件名中避免使用空格，因为这可能导致与相应的“web_accessible_resources”条目不匹配。 - undefined

Answer 2

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

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

而且对于Font Awesome，你只需要Chrome的.woff源。 在Chrome扩展中添加@font-face样式表规则 我的代码：

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

- mattdlockyer

---

注意："css": [...]应放在"content_scripts": [...]中。 - IvanRF

Answer 3

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

Firefox扩展自定义字体

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

- Tyler Biscoe

Answer 4

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

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

我知道这个问题很老，但它是谷歌搜索的顶部结果，而且被接受的答案效率低下。

编辑：看起来其他人对此得到了不同的结果。我应该提到，当在内容脚本中使用时，它可能不起作用。我已经在弹出式脚本中测试过了，它可以正常工作。

- matpie

---

@Layke 路径是相对于 CSS 文件位置的。我已经简化了示例，所以您可能仍需要指定 format()。 - matpie

这个不起作用。它试图在运行的实际网页内容脚本上查找资源。 - Aleksandr Motsjonov

本功能不适用于内容脚本，仅适用于弹出式浏览器操作。 - matpie

问题特别涉及内容脚本，但这并不起作用。 - Davi

如果用户没有使用内容脚本，那么描述的问题就不会成为问题。因此，我认为这个答案有些分散注意力。 - pixelearth