在过去的几年里，我一直在（与一群超级有才华的人一起）致力于一个名为 Recursive Sans & Mono 的字体系列，它刚刚在 Google Fonts 上正式发布！
想快速试用一下吗？以下是用于从 Google Fonts 使用完整 Recursive 可变字体系列的嵌入代码（但如果您继续阅读，您将获得更多灵活性和性能！）
<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">
我最初将 Recursive 作为荷兰皇家艺术学院（KABK）字体媒体系（KABK TypeMedia）字体设计硕士课程的论文项目，并在创建我的字体铸造厂 Arrow Type（Arrow Type）后，随后被 Google Fonts 委托完成并发布 Recursive 作为开源 OFL 字体。
您可以在 recursive.design 上查看 Recursive 并了解有关它及其功能的更多信息。
Recursive 旨在成为一个灵活的字体系列，适用于网站和代码，其主要目的是为开发人员和设计师提供一些有趣且实用的字体，将新颖的美学与最新的字体技术相结合。
首先，需要一个必要的定义：可变字体 是将一系列风格整合到一个文件中字体文件，通常以允许字体用户从流畅的风格范围内选择一种风格的方式。这些风格范围称为可变轴，可以是参数，例如字体粗细、字体宽度、光学尺寸、字体倾斜或更具创意的元素。在 Recursive 的情况下，您可以控制“等宽度”（从Mono 到Sans）和“休闲度”（在正常的线性风格和毛笔式的休闲风格之间）。每个字体系列可能有一个或多个自己的轴，并且与字体的许多功能一样，可变轴是字体设计师的另一个设计考虑因素。
您可能已经看到 Google Fonts 已开始在其庞大的收藏中添加可变字体。您可能已经阅读过有关 可变字体可以实现的一些很棒的功能。但是，您可能没有意识到，许多即将进入 Google Fonts 的可变字体（包括 Recursive）都具有比从 Google Fonts 默认前端获得的更多风格范围。
由于 Google Fonts 拥有广泛的用户群体——其中许多是 Web 开发新手——因此，他们只显示可变字体的“粗细”轴是可以理解的。但是，对于像 Recursive 这样的字体，这种简化实际上忽略了许多选项。在 Recursive 页面上，Google Fonts 向访问者显示了 8 种风格，外加一个轴。但是，Recursive 实际上有 64 种预设风格（也称为命名实例），以及您可以调整的总共 5 个可变轴（这些轴构成了更多潜在的自定义风格）。
Recursive 可以被划分为我认为的四个“子系列”之一。Google Fonts 显示的部分是最简单的比例（无衬线）版本。四个 Recursive 子系列各有权重范围，以及斜体，可以归类为
- Sans Linear：一种比例的、“正常”外观的无衬线字体。这就是 Google Fonts 网站上显示的内容。
- Sans Casual：一种比例的“毛笔休闲”字体
- Mono Linear：一种等宽的“正常”字体
- Mono Casual：一种等宽的“毛笔休闲”字体
这可能比用文字描述更容易理解。以下是两个表格（一个用于 Sans，另一个用于 Mono）显示了 64 个命名实例
但同样，Google Fonts 的主要界面仅提供对其中 8 种风格的访问，以及粗细轴。
如今，并非许多可变字体都拥有超过粗细轴的功能，因此从某种意义上说，这是一种可以理解的用户体验选择。尽管如此，我还是希望它们将来能够提供更多灵活性。作为一名字体设计师和字体爱好者，看到当前仅限粗细的方案感觉更像是人为的扁平化而不是真正的简化——就像 Google 地图通过排除所有不是高速公路的道路来“简化”地图一样。
幸运的是，您仍然可以访问 Google Fonts 托管的可变字体的全部潜力：了解 Google Fonts CSS API 版本 2。让我们看看如何使用它来充分利用 Recursive。
但首先，了解一些有关可变字体工作原理的信息很有帮助。
可变字体的运作方式及其重要性
如果您曾经在网络上处理过照片，那么您就会知道，当较小的版本可以满足需求时，您永远不应该提供 9000 像素的 JPEG 文件。通常，您可以使用压缩来缩小照片，以便用户下载时节省带宽。
字体文件也有类似的考虑因素。您可以通过 子集化其中包含的字符（有点像裁剪像素以仅保留您需要的区域）来大幅减少字体的大小。您可以通过将其转换为 WOFF2 文件来进一步压缩文件（这有点像通过像 imageOptim 这样的优化工具运行光栅图像文件）。托管字体的供应商（如 Google Fonts）通常会自动为您执行这些操作。
现在，考虑一下视频文件。如果您只需要显示 60 秒视频的前 10 秒，则可以剪掉最后 50 秒，从而获得更小的视频文件。
可变字体有点像视频文件：它们具有一系列或多系列信息（可变轴），并且这些信息通常可以被修剪或“固定”到某个位置，这有助于减小文件大小。
当然，可变字体与视频文件完全不同。字体以矢量记录每个字母的形状（类似于 SVG 如何存储形状信息）。可变字体有多个“源位置”，就像动画中的关键帧。要在不同风格之间切换，构成字母的控制点会在其不同的源位置（也称为增量）之间进行数学插值。字体可能有多组增量（每个可变轴至少一组，但有时更多）。因此，要修剪可变字体，您必须修剪掉不需要的增量。
举个具体的例子，Recursive 中的 Casual 轴通过在其两个极端之间插值矢量控制点，将字母形式从“Linear”更改为“Casual”：基本上，一个普通绘制和一个毛笔绘制。下面的＆符号字形动画展示了其工作原理：控制点在一个极端绘制圆角，并在另一端转换为方角。
通常，每个添加的轴都会使可变字体正常工作所需的绘图数量加倍。有时数量或多或少——Recursive 的粗细轴需要 3 个位置（绘图数量增加三倍），而其草书轴根本不需要额外位置，而实际上只是激活了每个位置上已经存在的不同备用字形。但是，一般的数学原理是：如果您可以从可变字体中剪掉不需要的轴，通常会获得更小的文件。
使用 Google Fonts API 时，您实际上是在选择每个轴。这样，您就可以选择您想要的部件，而不是从一个大文件开始并将其缩减。
可变轴标签
如果您要使用 Google Fonts API，则首先需要了解如何标记轴。每个轴都具有完整名称和缩写。
这些轴缩写采用四字母“标签”的形式。对于 Microsoft 定义并在 OpenType 规范中记录的轴，这些标签为小写，而对于其他人发明或定义的新轴（这些轴也称为“自定义”或“私有”轴），则为大写。有一些努力试图标准化其中一些新轴。
字体当前可以包含五个标准轴：
wght– 粗细，用于控制轻盈和粗体wdth– 宽度，用于控制整体字母宽度opsz– 光学尺寸，用于控制对设计的调整，以便在各种尺寸下获得更好的可读性ital– 斜体，通常用于在单独的直立/斜体设计之间切换slnt– 倾斜，通常用于控制直立到倾斜的设计，并提供中间值
自定义轴几乎可以是任何东西。Recursive 包含其中三个——等宽（MONO）、休闲（CASL）和草书（CRSV），以及两个标准轴 wght 和 slnt。
Google Fonts API 基础知识
当你在 Google Fonts 界面配置字体嵌入时，它会提供一些包含 URL 的 HTML 或 CSS 代码，最终会调用包含一个或多个 `@font-face 规则` 的 CSS 文档。这包括字体名称以及指向 Google 服务器上字体文件的链接。
这个 URL 实际上是调用 Google Fonts API 的一种方式，它的功能比你想象的要强大得多。它包含几个基本部分：
- 指定 API 的主 URL (
https://fonts.googleapis.com/css2) - 你在一个或多个
family参数中请求的字体详细信息 - 用于设置
display参数的 `font-display` 属性
例如，假设我们想要 Recursive（在 Sans Linear 子系列中）的常规粗细。以下是我们将在 CSS @import 中使用的 URL
@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');或者我们可以在 HTML 的 <head> 中链接它
<link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">一旦到位，我们就可以开始在 CSS 中应用字体了
body {
font-family: 'Recursive', sans-serif;
}每个轴都有一个默认值
MONO0 (无衬线/比例)CASL0 (线性/普通)wght400 (常规)slnt0 (直立)CRSV0 (罗马/非草书小写)
选择你的冒险：样式或轴
Google Fonts API 提供两种方式来请求可变字体的一部分
- 列出轴以及你想要从其中获取的特定非默认值
- 列出轴以及你想要从中获取的范围
获取特定的字体样式
通过向 Google Fonts URL 添加参数来请求字体样式。为了保持所有轴上的默认值，但使用休闲样式，你可以将查询设置为 Recursive:CASL@1（这将提供 Recursive Sans Casual Regular）。要将其设置为 Recursive Mono Casual Regular，请在 @ 之前指定两个轴，然后分别指定它们的值（但请记住，自定义轴使用大写标签）
https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap要请求常规和粗体，只需将 family 调用更新为 Recursive:wght@400;700，添加 wght 轴并在其上指定特定值即可
https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swapGoogle Fonts 的一个非常有用的功能是，你可以从 API 中请求大量单独的样式，并且在可能的情况下，它实际上会提供涵盖所有这些请求样式的可变字体，而不是为每个样式提供单独的字体文件。即使你在请求特定位置而不是可变轴范围时，这也是正确的——如果他们可以为你的 API 请求提供更小的字体文件，他们很可能会这样做。
由于可变字体可以在未来更灵活和高效地进行裁剪，因此为给定 API 请求提供的文件可能会随着时间的推移变得更加智能。因此，对于生产站点，最好只请求你需要的样式。
然而，有趣的是，你也可以请求可变轴。这使你能够保留很多设计灵活性，而无需每次想要使用新样式时都更改字体请求。
使用 Google Fonts API 获取完整的可变字体
Google Fonts API 试图通过让用户只选择他们想要的样式和轴来使字体更小。但是，要获得可变字体的全部好处（更少的文件中拥有更多设计灵活性），你应该使用一个或多个轴。因此，与其使用 Recursive:wght@400;700 请求单个样式，不如使用 Recursive:[email protected] 请求完整的 范围（将 ; 更改为 .. 以指示范围），甚至扩展到完整的 Recursive 粗细范围 Recursive:[email protected]（这只会增加很少的文件大小，但会增加很多额外的设计 功能）。
你可以通过按字母顺序排列（先是小写标准轴，然后是大写自定义轴）在 @ 之前列出它们，然后按相同的顺序在后面指定它们的值或范围来添加其他轴。例如，要添加 MONO 轴 和 wght 轴，可以使用 Recursive:wght,[email protected],0..1 作为字体查询。
或者，要获取完整的可变字体，可以使用以下 URL
https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap当然，你仍然需要将其放入 HTML 链接中，如下所示
<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">进一步自定义以平衡灵活性与文件大小
虽然使用可变字体的每个轴都很有诱惑力，但值得记住的是，每个额外的轴都会增加总文件大小。因此，如果你真的不打算使用某个轴，那么将其排除在外是有意义的。你随时可以以后再添加它。
假设你想要 Recursive 的 Mono Casual 样式在一个粗细范围内，你可以这样做
<link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet">以上方法不再有效 🤷。可能是测试版功能，也可能是语法发生了变化。如果你了解更多信息，请随时与我们联系。
你可以使用其他 family 参数将多个字体族添加到 API 调用中。只需确保字体按字体族名称排序即可。
<link href="https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet">使用可变字体
标准轴都可以使用现有的 CSS 属性进行控制。例如，如果你有一个具有粗细范围的可变字体，则可以使用 font-weight: 425; 指定特定的粗细。所有轴都可以使用 `font-variation-settings` 进行控制。因此，如果你想要 Recursive 的 Mono Casual 超粗体样式（假设你已如上所示调用了完整的字体族），则可以使用以下 CSS
body {
font-weight: 950;
font-variation-settings: 'MONO' 1, 'CASL' 1;
}需要了解的是：font-variation-settings 与 `CSS 自定义属性` 一起使用更加方便。
你可以在 `VariableFonts.io` 和优秀的 `CSS-Tricks 上关于可变字体的文章合集` 中阅读有关使用可变字体设计的更多详细信息。
关于可变字体性能的极客笔记
如果你要将 Recursive 的所有 64 种预设样式作为单独的 WOFF2 文件（使用其完整、非子集字符集）使用，总共约为 6.4 MB。相比之下，你可以在可变字体中以仅 537 KB 的大小获得如此多的样式范围（以及两者之间的一切）。当然，这是一个略显荒谬的比较——你几乎永远不会在一个网页上实际使用 64 种样式，尤其是不使用其完整的字符集（如果你确实这样做了，你应该使用带有 `unicode-range` 的子集）。
一个更好的比较是 Recursive 带有一个轴范围与该轴范围内的样式。在我的测试中，一个被子集化为“Google Fonts Latin Basic”字符集（仅包含涵盖英语和西欧语言的字符）的 Recursive WOFF2 文件，包括完整的 300–1000 粗细范围（以及所有其他轴“固定”到其默认值）为 60 KB。同时，具有相同子集的单个样式为 25 KB。因此，**如果你只使用 Recursive 的三种粗细，则可以使用可变字体而不是单个文件节省约 15 KB**。
作为子集 WOFF2 的完整可变字体大小为 281 KB，对于字体来说有点大，但如果你将其与大型 JPEG 图像的重量进行比较，则不算太大。因此，如果你假设单个样式约为 25 KB，如果你计划使用超过 11 种样式，那么最好使用可变字体。
这种计算在很大程度上是出于两个主要原因的学术练习
- 可变字体不仅仅关乎文件大小。更大的优势在于，它们允许你只进行设计，选择你想要的精确字体粗细（或其他样式）。字体看起来有点太轻了吗？稍微增加
font-weight，例如从400到425！ - 更重要的是（如前所述），如果你从 Google Fonts 请求可变字体样式或轴，它们会为你处理繁重的工作，根据你的 API 请求和访问你网站的浏览器访客发送他们认为最有效和有用的字体。
因此，你实际上不需要下载 Google Fonts API 返回的字体来比较它们的文件大小。尽管如此，了解一般的权衡取舍仍然很有价值，以便你能够最好地决定何时选择可变轴，以及何时将自己限制在几个样式中。
下一步是什么？
启动 CodePen 并试用一下 API！在 CodePen 中，你可能需要使用 CSS 的 @import 语法，例如在 CSS 面板中这样使用
@import url('https://fonts.googleapis.com/css2?family=Recursive:CASL,CRSV,MONO,slnt,[email protected],0..1,0..1,-15..0,300..1000&display=swap');显然，使用 HTML 链接语法更好，可以避免阻塞其他资源的并行下载。在 CodePen 中，你可以打开笔设置，选择 HTML，然后在 HTML 头部设置中放置 <link>。
或者，嘿，你也可以直接复制我的 CodePen 并在那里进行实验
使用 API 配置快捷方式
如果你想跳过弄清楚确切的 API 调用并希望选择 Recursive 的可变轴并进行半高级 API 调用，我在 Recursive 微型网站（点击“获取 Recursive”按钮）上提供了一个简单的配置工具。这允许你快速选择要使用的固定样式或变量范围，甚至可以估算生成的文件大小。但是，这仅公开了一些 API 的功能，如果你想更具体，你可以获得更多信息。我试图让人们在最小的文件中使用最多的样式范围，同时考虑到 可变字体实例化的当前限制。
在代码中使用 Recursive
此外，Recursive 最初实际上是设计为用于代码的字体。你可以通过你的帐户设置在 CodePen 上使用它。更好的是，你可以下载并使用 GitHub 上的最新 Recursive 版本，并在任何代码编辑器中设置它。
探索更多字体！
Google Fonts API 文档帮助性地包含了 可变字体的（部分）列表，以及有关其可用轴范围的详细信息。我最喜欢的几个具有除粗细之外的轴的字体是 Encode Sans（wdth、wght）和 Inter（slnt、wght）。你还可以过滤 Google Fonts 以 仅显示可变字体，尽管这些结果中的大多数仅具有粗细轴（仍然很酷且有用，但不需要自定义 URL 配置）。
更多令人惊叹的可变字体即将进入 Google Fonts。我特别期待的是
- Fraunces：“一种展示型、“老式”软衬线字体，灵感来自 20 世纪初的字体，如 Windsor、Souvenir 和 Cooper 系列”
- Roboto Flex：像 Roboto 一样，但具有广泛的粗细、宽度和光学尺寸范围
- Crispy：一种创意、有棱角、超级灵活的可变展示字体
- Science Gothic：“一种方形无衬线字体，‘紧密基于 1930 年代初的字体 Bank Gothic——但添加了小写字母、设计轴和语言覆盖范围’”。
- Commissioner：一种低对比度人文主义无衬线字体，具有几乎经典的比例，并具有三种“风格”，其笔画可以是直的、张开的或楔形的。
是的，如果你想在今天的项目中使用这些字体，你绝对可以下载并自行托管它们。但是 请继续关注 Google Fonts，以获取更多令人惊叹的灵活字体！
当然，字体世界比开源字体大得多。有很多令人难以置信的字体铸造厂正在开发激动人心、突破界限的字体，其中许多铸造厂也在探索可变字体中新的和令人兴奋的领域。许多铸造厂倾向于采用其他许可方法，但对于合适的项目来说，好的字体可以具有极高的价值（我显然有偏见，但为了一个简单的论点，只需看看排版如何增强 Apple、Stripe、Google、IBM、Figma、Slack 等品牌的形象）。如果你想欣赏更多可能性，并且你还不认识这些名称，一定要查看 DJR、OHno、Grilli、XYZ、Dinamo、Typotheque、Underware、Bold Monday，以及 Future Fonts 上许多非常有趣的 WIP 项目。（我省略了一些其他很棒的铸造厂，但这些铸造厂都做了一些我特别喜欢的作品，这并不是 字体铸造厂的目录。）
最后，一些厚颜无耻的自我推销：如果你想支持我以及我除了 Recursive 之外的作品，请考虑查看我的 WIP 通用无衬线字体 Name Sans，注册我的 （非常）不频繁的时事通讯，以及 关注我的 Instagram。
非常感谢你撰写这篇全面且易于理解的文章。我迫不及待地想在网上某个地方使用 Recursive。此外，祝 Name Sans 好运，我希望 Google Fonts 也会赞助它。
非常感谢！我很幸运，有几位优秀的编辑查看并帮助使其变得更加强大。
感谢你对 Name Sans 的赞美之词！经济现实是，即使 Google Fonts 可以委托一些非常酷的字体，但它也无法支持所有字体。因此，在普遍的基本收入成为现实（希望有一天！）之前，我将不得不通过出售这些字体的许可证来支持大多数字体，包括 Name Sans。但是，通过 Future Fonts 发布意味着你现在可以以大幅折扣的价格购买完整字体的许可证，并免费获得未来的扩展和升级！我知道，即使是当前的价格也可能有点高，具体取决于你的近期用途。因此，请继续关注即将推出的更多字体！
很酷的字体.. 正是我为我正在玩的一个小项目寻找的.. 谢谢！
太棒了！很高兴我可以用它做出一些可能很有效的东西。:)
很棒的作品和文章！我正在 vscode 中尝试使用“Recursive Mono Casual Static”以及你的颜色主题。它绝对赏心悦目 8) 谢谢
太棒了！感谢你尝试使用它。我确实喜欢用它编码。
另外，尝试“Rec Mono for Code”字体（也在 GitHub 上的版本中，https://github.com/arrowtype/recursive/releases/latest）。我特别喜欢“Duotone”版本——它提供了线性直立体加上休闲斜体，以及代码连字。
非常（非常）优雅的字体，我非常喜欢它。让我想在某个地方使用它。
感谢这篇文章和分享。
太棒了
你好！多么漂亮的字体，感谢你的辛勤工作！
我刚刚在 CodePen 中简要测试了一下，看看使用链接参数等是什么感觉，但我无法渲染字体。
这是我的代码。我哪里做错了？
.
.
.
.
Cheese
太棒了
刚接触可变字体。真的很喜欢 Recursive 字体（对眼睛很友好），但想知道以下内容是否可行=想从读写障碍友好性的角度使其更容易访问...具体来说是 b/d 和 p/q，目前除了镜像外没有明显的区别。想知道是否有办法创建 CSS 代码，使 d 和 q 稍微倾斜或休闲，从而与其镜像对应物更好地区分，但又不显得太怪异（认为这可能是可变字体大放异彩的地方）。希望将其应用于 CSS 的“风格”，例如整个正文文本。谢谢！
嘿，MZ，感谢你的赞美！有趣的问题。
Casual 和 Cursive 轴确实有助于区分 d/b p/q 字母，从镜像对称到旋转对称，并改变 d 和 b 的形状。在最近的更新中，可以激活 Cursive 字母但保持简单的斜线（k/v/w/x/y/z）。基本上，这两行代码
font-variation-settings: “CRSV” 1, “CASL” 1;
font-feature-settings: “ss07”;
CodePen 链接不会显示在评论中，但在 CodePen 上搜索“Recursive Test – possible dyslexic enhancement？”，你应该能够找到一些演示此功能的代码。
（我还会考虑在未来版本的 Recursive 中为 Cursive 的“q”添加一个尾巴，以使其更好…）
请注意：这可能不适用于 Google Fonts 版本的 Recursive，因为它是一个最近的更新，并且新版本的字体需要一段时间才能进入 Google Fonts。所以，如果你今天想这样做，你可能应该使用 Recursive 代码库最新版本中提供的网络字体（也可以从 Recursive 网站获取）。
查看了 CodePen。这是一个不错的折衷方案。会看看你的 Recursive 网站。谢谢！！
我对大多数 Google 字体的文件大小节省印象深刻。在我的测试中，加载“variable bold”和“variable italic”通常只有加载标准“normal”、“italic”、“bold”和“bold-italic”大小的一半左右（而且你获得了更多选项）。
我唯一不满的是 Google 没有提供关于加载带斜体的可变字体家族的明确说明。他们只解释了如何加载单一风格的字体，这些说明不适用于多风格的字体家族。
然而，我实际上通过一些反复试验自己解决了这个问题。为了避免其他人遇到麻烦，我写了一篇文章解释了如何操作。
链接在此：https://www.launch2success.com/guide/getting-google-font-variable-files/
希望它对您有所帮助！也许它会鼓励更多地使用可变字体。
底部还有一个大约 30 种流行的可变字体的速查表。
欢迎反馈。