Question

我想在Chrome扩展程序中使用标准字体以外的其他内容。我对使用Google Web Fonts的可能性感到兴奋，但是当您的扩展程序使用它时，似乎会因在网络上传输Web字体而受到惩罚，从而影响我的扩展程序的性能。我是否可以选择使用我的扩展程序打包字体，该字体适用于所有Chrome支持的平台（Windows / Mac /等）？提前致谢

Answer 1

选择你的字体。例如，我将"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');
}

从url属性获取src值的第一个参数（ http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff < / em>的）。

现在下载此文件。

使用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属性的值。删除所有local并调整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规则。

注意：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.

Answer 2

要求用户访问Google Web Fonts的权限要比嵌入它们要少得多（即使这可能对最终的离线方案非常有意义）。

<强>的manifest.json

"permissions": [
    "http://fonts.googleapis.com/",
    "https://fonts.googleapis.com/"
],

Answer 3

这已经很老了但是对于仍然遇到此问题的人来说，可以使用javascript加载字体文件。我无法在阴影dom中使用font-face声明;所有样式都会加载，但chrome会完全忽略font-face声明。

let font = new FontFace("yourFontName", "url('path/to/font/file.woff')");
document.fonts.add(font);

这对我很有效。使用font-face可能是首选，但我很确定我的用例是chrome中的一个bug。 Here's the spec for it.

使用Google Chrome扩展程序打包字体

3 个答案: