41

我想在我的 Chrome 扩展程序中使用标准字体以外的东西。我对使用 Google Web Fonts 的可能性感到兴奋，但似乎每当您的扩展程序使用它时通过网络传输 Web 字体可能会受到惩罚，以至于影响我的扩展程序的性能。我是否有任何选项可以使用我的扩展程序打包字体，该字体可以在所有 Chrome 支持的平台（Windows/Mac/等）上运行？提前致谢

4

3 回答 3

61

选择你的字体。例如，我将采用"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）。

现在下载这个文件。

使用属性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.
于 2013-10-08T09:12:20.503 回答
10

这已经很老了，但对于任何对此仍有疑问的人，可以使用 javascript 加载字体文件。我很难让 font-face 声明在 shadow dom 中工作；所有样式都会加载，但 chrome 会完全忽略 font-face 声明。

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

这对我来说很有效。使用 font-face 可能是首选，但我很确定我的用例是 chrome 中的错误。这是它的规格。

于 2018-04-13T16:15:05.780 回答
7

询问用户访问 Google Web 字体的权限远比嵌入它们要少得多（即使这对于最终的离线场景可能非常有意义）。

清单.json

"permissions": [
    "http://fonts.googleapis.com/",
    "https://fonts.googleapis.com/"
],
于 2014-02-22T00:05:40.937 回答