一种兼容、更小、易用的WEB字体API：Google Fonts CSS API

一种兼容、更小、易用的WEB字体API

2022-05-23 前端基础

如何使用 Google Fonts CSS API 有效地使用WEB字体。

多年来，WEB字体技术发生了很多变化，过去在WEB中使用特殊字体的常用做法是图片或者Flash，这种借助图片或者Flash的实现方式不够灵活。随着 WEB 字体的出现，特别是 Google Fonts CSS API 的普及，让在WEB中使用特殊字体变得简单、快速、灵活，当然更多的还是面向英文字体，对于做外贸或者英文网站的开发者来说是福音。

Google Fonts CSS API 在不断发展，以跟上WEB字体技术的变化。它从最初的价值主张——允许浏览器在所有使用API的网站上缓存常用字体，从而使网页加载更快，到现在已经有了很大的进步。现在不再是这样了，但API仍然提供了额外的优化方案，使网站加载迅速，字体工作性能更佳。

使用Google Fonts CSS API ，网站可以请求它需要的字体数据来保持它的CSS加载时间到最少，确保网站访问者可以尽可能快地加载内容。该API将以最佳的字体响应每个请求的web浏览器。

所有这一切都是通过在代码中包含一行 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 将通过以下两种方式之一处理请求：

如果请求使用 API 已有文件的通用参数，它会立即将 CSS 返回给用户，将定向到这些文件。
如果请求的字体带有 API 当前未缓存的参数，它将即时对字体进行子集化，使用 HarfBuzz 快速完成，并返回指向它们的 CSS。

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

WEB 字体可以很大，在 WOFF2 中，仅一个 Noto Sans Japanese 的大小就几乎是 3.4MB ，将其下载给每一位用户将拖累页面加载时间。当每一毫秒都很重要并且每个字节都很宝贵时，需要确保只加载用户需要的数据。

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

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

Google Fonts CSS API 可以创建非常小的字体文件（称为子集）

CSS API 还自动为用户提供额外的WEB字体优化，无需设置任何 API 参数。该 API 将为用户提供已启用 unicode-range 的 CSS 文件（如果 Web 浏览器支持），因此只为网站需要的特定字符加载字体。

unicode-range CSS 描述符是一种现在可用于应对大字体下载的工具，这个 CSS 属性设置 @font-face 声明包含的 Unicode 字符范围。如果在页面上呈现这些字符之一，则下载该字体。这适用于所有类型的语言，因此可以采用包含拉丁文、希腊文或西里尔文字符的字体并制作更小的子集。在前面的图表中，可以看到如果必须加载所有这三个字符集，则将超过 600 个字形。

看到 CJK 字体覆盖的字符数是拉丁字符字体的 15-20 倍

这也为 Web 启用了中文、日文和韩文 (CJK) 字体提供支持。在上图中，可以看到 CJK 字体覆盖的字符数是拉丁字符字体的 15-20 倍。 CJK 字体通常非常大，并且这些语言中的许多字符不像其他字体那样频繁使用。

使用 CSS API 和 unicode-range 可以减少大约 90% 的文件传输。使用 unicode-range 描述符，可以单独定义每个部分，并且只有在内容包含这些字符范围中的一个字符时才会下载每个切片。

例如只想在 Noto Sans JP 中设置单词 こんにちは ，则可以按照如下方式使用：

自托管自己的 WOFF2 文件
使用 CSS API 检索 WOFF2
使用 CSS API 并将 text= 参数设置为 こんにちは

使用 CSS API，已经比自托管 WOFF2 字体节省了 97.5%

在此示例中，可以看到通过使用 CSS API，已经比自托管 WOFF2 字体节省了 97.5%，这要归功于 API 内置支持将大字体分隔到 unicode-range 中功能。通过更进一步并准确指定要显示的文本，可以进一步将字体大小减小到仅 CSS API 字体的 95.3% ，相当于比自托管字体小 99.9%。

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

使用 Google Fonts CSS API 让WEB字体面向未来

Google 字体团队还为新的 W3C 标准做出了贡献，这些标准继续创新网络字体技术，例如 WOFF2。当前的一个项目是增量字体传输，它允许用户在屏幕上使用字体文件时加载非常小的部分，并按需流式传输其余部分，超过了 unicode-range 的性能。当使用 WEB 字体API时，当用户在浏览器中可用时，就可以获得这些底层字体传输技术的优化改进。

这就是字体 API 的美妙之处：用户可以从每项新技术改进中受益，而无需对网站进行任何更改。新的WEB字体格式？没问题，新的浏览器或操作系统支持？它已经处理好了。因此，可以自由地专注于用户和内容，而不是陷入WEB字体维护的困境。

可变字体支持内置

可变字体是可以在多个轴之间存储一系列设计变化的字体文件，新版本的 Google Fonts CSS API 包括对它们的支持。添加一个额外的变化轴可以使字体具有新的灵活性，但它几乎可以使字体文件的大小增加一倍。

当 CSS API 请求更具体时，Google Fonts CSS API 可以仅提供网站所需的可变字体部分，以减少用户的下载大小。这使得可以为 WEB 使用可变字体，而不会导致页面加载时间过长。可以通过在轴上指定单个值或指定范围来执行此操作，甚至可以在一个请求中指定多个轴和多个字体系列， API 可以灵活地满足需求。

总结

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

更兼容
体积更小
加载快速
易于使用

有关 Google 字体的更多信息，请访问 fonts.google.com。