use*_*001 32 webfonts google-chrome-extension
我希望在Chrome扩展程序中使用标准字体以外的其他内容.我对使用Google Web Fonts的可能性感到兴奋,但是当您的扩展程序使用它时,似乎会因在网络上传输Web字体而受到惩罚,从而影响我的扩展程序的性能.我是否可以选择使用我的扩展程序打包字体,该字体适用于所有Chrome支持的平台(Windows/Mac /等)？提前致谢
Wal*_*uch 48
选择你的字体.例如,我将采取"Stint Ultra Expanded".有一个示例如何将其添加到您的页面:
<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>
只需href在浏览器中打开它.你会看到这样的smth:
@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');
}
url从src属性中获取第一个值参数(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff).
下载此文件.
使用属性local值的参数src作为文件名(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中使用此字体,则必须url在css中进行调整:
@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');
}
您可以根据需要@font-face在css中添加任意数量的规则.
注意:属性中的local值src告诉您应该使用哪个名称来存储它.最好使用这个名字.
第二次通知:如果您使用谷歌预期,您的浏览器将检查此字体是否已在本地可用.如果不是这种情况,则会下载并存储它.所以下次它会使用以前存储的字体.
从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.
向用户请求访问 Google Web Fonts 的权限比嵌入它们要省力得多（即使这对于最终的离线场景可能非常有意义）。
清单文件
"permissions": [
"http://fonts.googleapis.com/",
"https://fonts.googleapis.com/"
],
这已经很老了，但对于仍然对此有疑问的任何人，都可以使用javascript加载字体文件。我很难让一个字体的声明在影子dom中工作；所有样式都会加载，但是chrome只会完全忽略字体声明。
let font = new FontFace("yourFontName", "url('path/to/font/file.woff')");
document.fonts.add(font);
这对我来说效果很好。最好使用font-face，但我可以肯定我的用例是chrome中的错误。这是它的规格。