从Google字体上充分利用可变字体

我花了多年的时间开发了递归的Sans＆Mono字体家庭（拥有一支出色的团队！），终于在Google字体上使用！

想立即使用它吗？这是Google字体的完整递归变量字体系列的嵌入式代码（但为了获得最佳的灵活性和性能，请继续阅读！）。

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

递归始于我在Kabk Typemedia的类型设计大师论文。后来，我的Foundry Arrow Type由Google字体委托完成并发布递归为开源字体。

探索递归及其在递归中的功能。

递归是一个用于网站和代码的多功能字体家族，为开发人员和设计师提供了现代美学和尖端字体技术的融合。

让我们澄清一下：可变字体在一个文件中包含一系列样式，使用户可以流畅地选择样式。这些范围称为变量轴，代表重量，宽度，光学大小，倾斜等参数。递归使您可以控制“单层面”（从单声道到sans）和“休闲”（从线性到刷样式）。每个字体家族都可以具有多个轴，这是一个关键的设计考虑。

Google字体添加了可变字体，但是许多（包括递归）提供的风格选项比默认接口显示的更多。为了易于使用，Google字体简化了显示，主要显示“重量”轴。但是，这隐藏了递归的64个预设样式和五个可变轴。 Google字体页面显示了八种样式和一个轴，而递归实际上提供了更多。

递归可以分为四个“亚家族”：

• SANS线性：标准比例sans-serif字体（在Google字体上显示）。
• 随意：比例的“刷子休闲”字体。
• 单线性：标准的单层字体。
• 单休休闲：单个“刷子休闲”字体。

可视化这比描述它容易。两张表（一张用于sans，一个用于单声道）说明了64个命名实例（此处未显示为简洁）。 Google字体接口仅显示八个，加重轴。

鉴于Google字体的用户群多样化，这种仅重量的方法是可以理解的，但它限制了字体的潜力。 Google字体API提供了解决方案。

了解可变字体及其效率

Web开发人员知道不要为超大的JPEG服务。类似的原则适用于字体。子集字符并使用WOFF2压缩减少文件大小。

可变字体就像视频文件：它们包含可以修剪或“固定”到特定值的信息范围（可变轴），从而减少了文件大小。与视频不同，字体使用矢量形状。可变字体具有多个“源位置”（密钥帧）。样式是通过在这些位置（Deltas）之间数学插值创建的。修剪可变字体意味着删除不必要的三角洲。

例如，递归的休闲轴在“线性”和“休闲”字母形式之间插值。 Ampersand和Glyph动画（此处未显示）证明了这一点。

每个添加的轴通常将图纸数增加一倍。 Google字体API可让您仅选择所需的轴，从而产生较小的文件尺寸。

可变轴标签

轴缩写是四个字母的标签（Microsoft定义的轴的小写，用于自定义轴的大写）。存在五个标准轴：

• wght - 重量
• wdth - 宽度
• opsz - 光学尺寸
• ital - 斜体
• slnt - 倾斜

递归使用三个自定义轴（ MONO ， CASL ， CRSV ）加上wght和slnt 。

Google字体API

Google字体接口生成一个称为Google字体API的URL。该网址有部分：

1. API URL（ https://fonts.googleapis.com/css2 ）
2. 字体家庭参数
3. font-display属性

要使用递归（无线性）的常规重量，请使用：

 <code>@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');</code>

或者，在html中：

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

然后，将字体应用于CSS：

 <code>body { font-family: 'Recursive', sans-serif; }</code>

默认轴值： MONO 0 ， CASL 0 ， wght 400 ， slnt 0 ， CRSV 0 。

指定样式或轴

API提供了两种方法：

1. 清单轴和特定值。
2. 清单轴和范围。

要获得休闲风格，请使用Recursive:CASL@1 。对于单休闲常规：

 <code>https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap</code>

对于常规和大胆：

 <code>https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap</code>

Google字体通常提供单个可变字体，涵盖多种请求的样式。为了生产，只需要求需要样式。使用变量轴可提供灵活性。

获取完整的变量字体

为了最大化灵活性，请使用变量轴。代替Recursive:wght@400;700 ，使用Recursive:[email protected] （或Recursive:[email protected] ）。按字母顺序添加轴： Recursive:wght,[email protected],0..1 。

完整的可变字体URL：

 <code>https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap</code>

在html中：

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

平衡灵活性和文件大小

每个轴都会增加文件大小。省略未使用的轴。对于具有不同权重的单一休闲样式：

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code>

（注意：以上可能无法正常运行。请参阅原始文章以获取更新。）

可以添加多个字体系列，按名称按字母顺序排列。

使用可变字体

标准轴使用标准CSS属性（ font-weight: 425; ）。所有轴都使用font-variation-settings 。对于单休闲风格的风格：

 <code>body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1; }</code>

font-variation-settings与CSS自定义属性效果很好。

有关可变字体设计的更多详细信息，请访问variablefonts.io和CSS-tricks。

可变字体性能

使用所有64个递归样式作为单独的文件总计约6.4 MB。可变字体为〜537 kb。全重量范围的子集递归WOFF2为60 kb；单一样式为25 kb。使用三个权重用可变字体节省约15 kb。完整的可变字体子集为281 kb。除了文件大小之外，可变字体还提供设计灵活性。 Google字体优化字体传递。

原始文章的其余部分是简洁的，但它继续提供有关使用API​​，探索其他变量字体并促进作者作品的其他信息。

以上是从Google字体上充分利用可变字体的详细内容。更多信息请关注PHP中文网其他相关文章！