我想在我的 Chrome 扩展程序中使用标准字体以外的其他字体。我对使用 Google Web Fonts 的可能性感到兴奋，但似乎每当您的扩展程序使用它时通过网络传输 Web 字体可能会受到惩罚，以至于影响我的扩展程序的性能。我是否有任何选项可以使用我的扩展程序打包字体，该扩展程序适用于所有 Chrome 支持的平台（Windows/Mac/等）？提前致谢
【问题讨论】：
标签： google-chrome-extension webfonts
选择您的字体。以"Stint Ultra Expanded" 为例。有一个示例如何将其添加到您的页面：
<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>
只取href 并在浏览器中打开它。你会看到这样的东西：
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: local('Stint Ultra Expanded'), local('StintUltraExpanded-Regular'), url(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}
从src 属性中获取url 值的第一个参数（http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff） .
现在下载这个文件。
使用src 属性的local 值作为文件名（Stint Ultra Expanded）
简单的方法是使用 wget 下载它：
wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff
现在创建 css 文件并添加您之前看到的内容。
但是您必须更改 src 属性的值。删除所有locals 并调整url。应该是这样的：
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: url('../fonts/Stint Ultra Expanded.woff') format('woff');
}
现在将您的 css 文件添加到扩展名并使用字体：
popup.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='css/fonts.css' rel='stylesheet' type='text/css'>
</head>
<body>
<span style="font-family: 'Stint Ultra Expanded';">Hello Font</span>
</body>
</html>
如果您想在 content_script 中使用此字体，您必须在您的 css 中调整 url：
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: url('chrome-extension://__MSG_@@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff');
}
您可以在 CSS 中添加任意数量的 @font-face 规则。
注意：src 属性中的local 值告诉您应该使用哪个名称来存储它。使用此名称是个好主意。
第二个注意事项：如果您像 google 预期的那样使用它，您的浏览器会检查该字体是否已经在本地可用。如果不是这种情况，那么它将被下载并存储。所以下次它会使用之前存储的字体。
从 Chrome 37（可能更早）开始，您需要在扩展程序的清单中提及该字体作为 Web 可访问资源：
"web_accessible_resources": [
"font/*.woff2"
]
否则你会看到如下错误：
Denying load of chrome-extension://{ID}/font/My Web Font.woff2.
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
【讨论】：
__MSG_@@extension_id__ 的哪些部分需要替换为我的 id？对于其他好奇的人，答案是“整个部分”
向用户请求访问 Google 网络字体的权限远比嵌入它们要少得多（即使这对于最终的离线场景可能非常有意义）。
manifest.json
"permissions": [
"http://fonts.googleapis.com/",
"https://fonts.googleapis.com/"
],
【讨论】：
@import css 属性。
这已经很老了，但对于任何对此仍有疑问的人，可以使用 javascript 加载字体文件。我很难让字体声明在 shadow dom 中工作；所有样式都会加载，但 chrome 会完全忽略 font-face 声明。
let font = new FontFace("yourFontName", "url('path/to/font/file.woff')");
document.fonts.add(font);
这对我来说非常有用。使用 font-face 可能是首选，但我很确定我的用例是 chrome 中的一个错误。 Here's the spec for it.
【讨论】：