将字体打包到 Google Chrome 扩展中

Question

将字体打包到 Google Chrome 扩展中

44

我希望在我的Chrome扩展程序中使用非标准字体。我对使用Google Web Fonts很感兴趣，但似乎每当您的扩展程序使用它时，将会为通过网络传输Web字体而受到惩罚，甚至会影响我的扩展程序的性能。那么，在所有Chrome支持的平台（Windows/Mac等）上，我有没有打包字体与我的扩展一起使用的选项？谢谢。

- user2852001

3个回答

12

虽然这个方法有些陈旧，但对于仍然遇到此类问题的人来说，可以使用JavaScript加载字体文件。在 Shadow DOM 中，我尝试使用 font-face 声明时出现了问题；所有样式都能够加载，但 Chrome 却完全忽略了 font-face 声明。

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

这对我非常有效。使用font-face可能更好，但我相信我的用例是chrome中的一个错误。这是规范。

- qwerty

这是对我有效的解决方案，我的使用情况似乎与你的类似。 - Steve06

这会导致404错误，因为字体文件不在站点的文件系统中，而是在您的扩展程序中。 - IMPixel

8

请求用户允许访问 Google Web Fonts 比嵌入它们要简单得多（即使最终的离线情况下，嵌入也可能是完美的选择）。

manifest.json

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

- Martin Zeitler

1

这在打包应用程序中不起作用，但在扩展中可以使用。 - Will Scott

@WillScott，你找到打包应用的解决方案了吗？ - Michael Cole

你要如何将CSS链接添加到扩展程序中呢？我尝试在清单文件中添加，但是没有起作用。 - djk

你可以在其中一个CSS文件中使用@import CSS属性。 - Cody

2

这个不起作用，至少在 manifest v3 中不起作用。 - vdegenne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Walery Strauch · Accepted Answer

选择您的字体。例如，我将选用"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属性的值。移除所有的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值告诉您应该使用哪个名称进行存储。使用此名称是个好主意。

第二个提示：如果您像Google期望的那样使用它，您的浏览器会检查本地是否已经有此字体可用。如果不是，则会下载并存储它。因此，下次它将使用先前存储的字体。

从Chrome 37（可能更早）开始，您需要在扩展程序的清单中将字体声明为 Web 可访问资源：

"web_accessible_resources": [
  "font/*.woff2"
]

否则，您将会看到如下错误信息：

Otherwise you would see an error like:

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.