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

如何使用 Google Fonts CSS API 高效传送 Web 字体。

Jimmy Mooney

多年来，Web 字体技术发生了许多变化。过去需要添加文字图片或 Flash 插件（这会影响网站的搜索引擎优化）是一种小众的做法，现在已然成为网络的标准做法。以前，您需要在页面加载之前加载整个字体（您甚至可能没有使用过的样式和字符），但这已经成为过去式了。

Google Fonts CSS API 也随着 Web 字体技术的变化而不断发展。它最初的价值主张已有很大进步，它允许浏览器在所有使用 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 已有文件的常用参数，API 会立即向用户返回 CSS，将用户定向到这些文件。
  2. 如果您请求的字体使用了 API 目前未缓存的参数，API 会使用 HarfBuzz 快速对字体进行子集划分，并返回指向这些字体的 CSS。

字体文件可以很大，但不一定很大

网络字体确实可能很大。Noto Sans Japanese 在 WOFF2 中的单一字号大小就接近 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 还会自动为您的用户提供额外的 Web 字体优化，而无需任何 API 参数。该 API 会向用户提供已启用 unicode-range 的 CSS 文件（如果其网络浏览器支持），以便他们仅加载您的网站所需的特定字符的字体。

unicode-range CSS 描述符现在可用于减少字体下载量。此 CSS 属性用于设置 @font-face 声明包含的一系列 Unicode 字符。如果网页中呈现了其中一个字符，系统就会下载该字体。这适用于所有类型的语言，因此您可以使用包含拉丁字符、希腊字符或西里尔字符的字体，并创建更小的子集。在上图中，您可以看到，如果必须加载所有三个字符集，则会超过 600 个字形。

一张图表，其中列出了基本拉丁语、扩展拉丁语、韩语和日语的字符数。

这还支持 Web 上的中文、日文和韩文 (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 的不同方法的图表。

在这个示例中，您可以看到，由于该 API 内置了将大型字体拆分为 Unicode 范围的支持，因此与自行托管 WOFF2 字体相比，使用 CSS API 已经节省了 97.5%。通过更进一步地精确指定要显示的文本，您可以将字体的大小进一步缩减到 CSS API 字体的 95.3%（比自托管字体小 99.9%）。

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

使用 Google Fonts CSS API 让您的网页字体能够满足未来需求

Google Fonts 团队还为新的 W3C 标准（WOFF2 等）不断创新网页字体技术做出了贡献。目前的一个项目是增量字体传输，它允许用户在屏幕上使用字体文件时加载字体文件的极小部分，并按需流式传输其余部分，性能超越 unicode-range。当您使用我们的网络字体 API 时，您的用户可以在浏览器中使用这些底层字体传输技术的改进。

这就是 Fonts API 的优势所在：您的用户可以获享每项新技术改进的好处，而您无需对网站进行任何更改。新的 Web 字体格式？没问题。是否支持新浏览器或操作系统？我们会为您搞定一切这样，您就可以专注于用户和内容，而不必为维护 Web 字体而烦心。

可变字体支持内置

可变字体是可在多个轴之间存储各种设计变体的字体文件，新版 Google Fonts CSS API 支持这些字体。添加额外的变体轴可以让字体更加灵活，但这可能会使字体文件的大小几乎翻倍。

如果您在 CSS API 请求中提供更具体的信息，Google Fonts CSS API 便只会提供您的网站所需的可变字体的部分内容，以便减少用户的下载大小。这样，您就可以在 Web 上使用可变字体，而不会导致页面加载时间过长。为此，您可以指定轴上的单个值，也可以指定一个范围；您甚至可以在一个请求中指定多个轴和多个字体系列。此 API 非常灵活，可满足您的需求。

易于植入，专为您优化

Google Fonts CSS API 可帮助您提供以下字体：

  • 与网络浏览器的兼容性更高。
  • 尽可能小。
  • 配送速度快。
  • 更易于使用。

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

致谢

主打图片由 leesehee 提供。