一款用于快速、精美的网页字体的 API

如何使用 Google Fonts CSS API 高效地提供网页字体。

Jimmy Mooney

这些年来，网页字体技术发生了很大变化。以前只是一种小众做法，需要使用文字图片或 Flash 插件（这不利于您网站的搜索引擎优化），现在已成为网络上的标准做法。很久以前，您必须加载整条字体，然后再加载页面（您可能甚至没有使用过样式和字符），但即使这样也已成为过去。

为了跟上网络字体技术的变化，Google Fonts CSS API 也在多年来不断发展完善。它已经远远超越了其最初的价值主张：允许您的浏览器缓存使用该 API 的所有网站上的常用字体，从而加快网络速度。这种情况已不复存在，但 API 仍会提供其他重要的优化措施，以便网站快速加载和字体正常运行。

使用 Google Fonts CSS API，您的网站可以只请求所需的字体数据，以尽可能缩短 CSS 加载时间，从而确保网站访问者可以尽快加载您的内容。API 将使用最适合该网络浏览器的字体响应每个请求。

这一切都可通过在代码中添加一行 HTML 来实现。

如何使用 Google Fonts CSS API

Google Fonts CSS API 文档很好地总结了这一点：

无需进行任何编程；您只需向 HTML 文档添加一个特殊的样式表链接，然后引用 CSS 样式中的字体。

您至少需要在 HTML 中添加一行代码，如下所示：

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

从 API 请求字体时，您可以指定所需的字体系列或系列，还可以指定其粗细、样式、子集和许多其他选项。然后，该 API 将通过以下两种方式之一处理您的请求：

  1. 如果您的请求使用 API 已有文件的常用参数，则会立即将 CSS 返回给用户，并将他们定向到这些文件。
  2. 如果您使用 API 当前尚未缓存的参数请求了字体，那么 API 会实时对字体进行子集内嵌，使用 HarfBuzz 快速完成此操作，并返回指向这些字体的 CSS。

字体文件可能很大，但并不一定要

网络字体可能很大。在 WOFF2 中，Noto Sans Japan 的单个重量几乎就有 3.4MB，将其下载到每个用户都会拖慢网页加载时间。如果每一毫秒都很宝贵，每个字节都很宝贵，那么您需要确保只加载用户所需的数据。

Google Fonts CSS API 可以创建实时生成的非常小的字体文件（称为子集），以便只为用户提供您网站所需的文本和样式。您可以使用 text 参数请求特定字符，而不是提供整个字体。

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

一个图表，包含基本拉丁语、基本希腊语和扩展希腊语的字符数。

CSS API 还会自动为用户提供额外的网页字体优化功能，无需任何 API 参数。此 API 会向用户提供已启用 unicode-range（如果受网络浏览器支持）的 CSS 文件，这样用户就只会为网站所需的特定字符加载字体。

unicode-range CSS 描述符这一工具现在可用于阻止下载大型字体。此 CSS 属性用于设置 @font-face 声明包含的 Unicode 字符范围。如果网页上呈现了这些字符之一，系统就会下载该字体。这适用于所有类型的语言，因此您可采用包含拉丁语、希腊语或西里尔字符的字体，并将其拆分为较小的子集。在上图中，您可以看到，如果必须加载所有这三个字符集，字形数量会超过 600 个。

一个图表，其中包含基本拉丁字母、扩展拉丁字母、韩语和日语字符计数。

这还会为网页启用中文、日语和韩语 (CJK) 字体。在上图中，您可以看到 CJK 字体覆盖的字符数为拉丁字符字体的 15-20 倍。这些字体通常非常大，而且这些语言中很多字符的使用频率不如其他语言。

使用 CSS API 和 unicode-range 可将文件传输减少约 90%。使用 unicode-range 描述符，您可以单独定义每个部分，并且只有当内容包含这些字符范围内的某个字符时，系统才会下载每个 Slice。

例如，如果您想仅设置 Noto Sans JP 中的“こんちは”一词，可执行以下操作：

  • 自行托管您自己的 WOFF2 文件。
  • 使用 CSS API 检索 WOFF2。
  • 使用 CSS API，并将 text= 参数设置为“こんたい”。

比较 Noto Sans JP 下载方法的图表。

在本例中，您可以看到，与自托管 WOFF2 字体相比，使用 CSS API 已经节省了 97.5%，这是因为该 API 内置了将大号字体分隔到 unicode-range 中的支持。通过更进一步，并准确指定您要显示的文本，您可以进一步缩小字体，仅缩减至 CSS API 字体的 95.3%，即比自托管字体小 99.9%。

Google Fonts CSS API 会自动以用户浏览器所支持的最小且最兼容的格式提供字体。如果用户使用的浏览器支持 WOFF2，该 API 将以 WOFF2 提供字体，但如果使用的是旧版浏览器，则 API 将以该浏览器支持的格式提供字体。为了缩减每位用户的文件大小，该 API 还会在不需要数据时从字体中移除数据。例如，如果用户的浏览器不需要这些数据，系统会移除提示数据。

使用 Google Fonts CSS API 确保网络字体能满足未来需求

Google Fonts 团队还为 WOFF2 等网络字体技术不断创新的 W3C 标准做贡献。目前的一个项目是 增量字体传输，通过它，用户可以在屏幕上显示非常小的字体文件，并按需加载其余的字体文件，远超 unicode-range 的性能。如果您使用我们的网页字体 API，当用户的浏览器中出现这些底层字体传输技术改进时，用户就可以获得这些改进。

这就是字体 API 的美妙之处：您的用户无需对您的网站进行任何更改，即可从这项新技术的改进中获益。新网络字体格式？没关系，是否支持新的浏览器或操作系统？它照顾好了。因此，您可以腾出时间专注于用户和您的内容，而不必费心维护网页字体。

可变字体支持内置

可变字体是可在多个轴之间存储各种设计变体的字体文件，新版 Google Fonts CSS API 也支持此类字体。添加额外的变体轴可实现新的字体灵活性，但它几乎可能使字体文件的大小增加一倍。

如果您的 CSS API 请求更为具体，Google Fonts CSS API 将只能处理您的网站需要的部分可变字体，从而缩减用户的下载大小。这样一来，您就可以在网页中使用可变字体，而不会产生较长的网页加载时间。为此，您可以在轴上指定单个值，或者指定范围；您甚至可以在一次请求中指定多个轴和多个字体系列。此 API 十分灵活，可以满足您的需求。

易于实施，为您优化

Google Fonts CSS API 可帮助您提供符合以下条件的字体：

  • 与网络浏览器的兼容性更强。
  • 尽可能小。
  • 配送快。
  • 使用更方便。

如需详细了解 Google Fonts，请访问 fonts.google.com。如需详细了解 CSS API，请查看 API 文档。

致谢

主打图片由 leesehee 提供。