使用谷歌浏览器扩展程序打包字体

我想在我的Chrome扩展程序中使用标准字体以外的其他字体。我对使用 Google Web 字体的可能性感到兴奋，但似乎只要您的扩展使用它，就会因通过网络传输 Web 字体而受到惩罚，以至于影响我的扩展的性能。我是否有任何选项可以将字体与我的扩展打包在一起，该字体适用于所有Chrome支持的平台(Windows/Mac/等(？提前致谢

选择您的字体。作为示例，我将以"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从属性 (http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff( 中获取url值的第一个参数。

现在下载此文件。

使用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属性的值。取下所有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 文件添加到扩展名并使用字体：

弹出窗口.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值会告诉您应该使用哪个名称来存储它。最好使用此名称。

第二个通知：如果您像谷歌预期的那样使用它，您的浏览器将检查此字体是否已经在本地可用。如果不是这种情况，那么它将被下载并存储。所以下次它会使用以前存储的字体。

从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.

这已经很老了，但对于任何仍然对此有问题的人来说，可以使用javascript加载字体文件。我无法让字体声明在影子 dom 中工作;所有样式都会加载，但 Chrome 只会完全忽略字体声明。

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

这对我来说效果很好。使用字体可能是首选，但我很确定我的用例是 chrome 中的一个错误。这是它的规格。

向用户请求访问 Google Web 字体的权限远比嵌入它们要省力(即使这对于最终的离线场景可能非常有意义(。

manifest.json

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

相关内容

最新更新

热门标签：