字体在Chrome扩展程序中不起作用

Question

我确定自己有99.9％的权利，但是由于某些原因，它无法正常工作。

我正在做一个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目录中，因此路径正确。

我完全不知所措。

任何的意见都将会有帮助。

更新：如果有帮助，我将其作为未打包的扩展程序加载。

Answer 1

解决方案是将 web_accessible_resources 添加到清单中（适用于清单版本 2）：

"web_accessible_resources": ["*.ttf" ]

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

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

工作完美。