Chrome扩展中字体无法使用

Question

我非常确定我是对的，但出于某种原因它却不起作用。

我正在制作一个Chrome扩展程序，它会注入CSS到页面中，我的CSS一直都很好用，直到我想要改变字体时。

所以我的清单文件是这样的...

"css": ["css/my-custom.css"],
"js": [ "js/jquery.js", "js/my-custom.js", "js/jquery.cookie.js"],
"web_accessible_resources": ["css/my-custom.css", "fonts/Roboto-Regular.ttf", "images/*.*"]

...我的 CSS 代码如下...

@font-face {
    font-family: 'RobotoLtRegular';
    src: url('chrome-extension://__MSG_@@extension_id__/fonts/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

body {
    background: #f1f1f1 !important;
    font-size: 1.2em !important;
    font-family: RobotoLtRegular !important;
}

p {
    font-family: RobotoLtRegular !important;
}

尽管如此，当我重新加载扩展程序时，我没有看到新字体。Chrome元素检查器还显示这个字体应该显示在body和p上（没有其他字体覆盖RobotoLtRegular）。

我的字体存储在扩展程序的css目录中，所以路径是正确的。

我完全不知道该怎么办。

任何建议都将有所帮助。

更新：如果有所帮助，我正在作为未打包的扩展程序加载它。

- User_FTW

---

尝试在font-face的URL后面添加 format("truetype")。 - wOxxOm

好的，但是网络选项卡显示了什么？作为@font-face，该字体仍需要加载资源，所以它被加载了吗？那个扩展资源URL有效吗？ - Mike 'Pomax' Kamermans

Answer 1

解决方案是在清单文件中加入web_accessible_resources（适用于清单文件版本2）：

"web_accessible_resources": ["*.ttf" ]

要包含其他文件类型，您可以使用逗号分隔它们，如下所示：

"web_accessible_resources": [ "*.png", "*.ttf" ]

运行完美。

- User_FTW

---

但是等等，你已经在问题的代码片段中有了这个。 - Xan

我认为他在content_scripts键内使用了web_accessible_resources关键字。这就是为什么最初它没有起作用的原因。 - Ahmet Keskin

不适用于 Manifest V3 - Cloud

Answer 2

字体 -> /字体/*

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

无需其他配置。

- artit91