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" ]

完美无缺。

Answer 2

fonts - ＆gt; /字体/ *

@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;
}

无需其他配置。

字体不在chrome扩展中

2 个答案: