浅浅学习下可变字体.

OpenType可变字体（英语：OpenType variable fonts）是字体格式OpenType在1.8版规范中引入的扩展规范，由苹果、微软、谷歌和Adobe联合开发，于2016年9月14日正式发布。 可变字体的优势：

  • 更小的文件体积
  • 更自由的设计空间
  • 更好的响应式网页适配性

微软可变字体简介： 粗细和宽度两个轴 https://learn.microsoft.com/en-us/typography/opentype/spec/otvaroverview

如何在web使用可变字体

可变字体（Variable fonts） 是 OpenType 字体规范上的演进，它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。你只需通过 CSS 与一行 @font-face 引用，即可获取包含在这个单一文件中的各种字体变体。

@font-face {

}

静态字体和可变字体的差异

标准（静态）字体

过去，一个字体家族往往由大量独立字体文件组成，每个字体文件都代表某一特定的宽度/字重/样式的组合。因此你会看到有单独的字体文件叫做“Roboto Regular”、“Roboto Bold”，或是“Roboto Bold Italic”——这意味着你可能需要 20 或 30 个不同的字体文件才能算是有了一整个字体家族（对于有着不同宽度的大型字体来说，这个数量还要翻上几倍）。

在这样的情景下，为了在一个单纯显示进行正文展示的页面中使用一个字体，你至少需要四个字体文件：常规、斜体、加粗、斜体加粗。如果你想添加更多的字重，比如让题注更轻或让额外强调的地方更重，意味着你需要更多文件。这就导致了更多大量 HTTP 请求的产生，同时也需要下载更多的数据（通常每个文件至少有 20k 或更多）。

可变字体

通过使用可变字体，所有这些情况的排列组合都可以被装进一个文件中。这个文件可能比常规的单个字体文件大一些，但通常情况下，都不会大于，并且常常是小于你因为要展示正文所需要下载的四个文件的尺寸总和。使用可变字体的优势是你可以直接使用所有可用的字重、宽度和样式的字体，而不必像过去一样仅仅受限于使用其中单独的某一种。一个可变字体文件可以包含传统静态字体系列中的所有字体。 就原始文件大小而言，这是一个直接的胜利，因为它紧凑地打包了整个字体系列。 替换的静态字体越多，节省的空间就越大——对于非常大的字体系列，压缩甚至高达 70%。

这允许使用常见的排版技术，例如在不同的字重中设置不同大小的标题，以便在每种大小下都具有更好的可读性，或者在数据密集展示时使用稍窄一点的字体宽度。相比之下，在杂志的印刷系统中，在整个出版物中使用 10-15 种或更多不同的字重和宽度组合是很典型的——这比目前在 web 上的典型样式提供了更广泛的样式范围 (或者仅从性能方面考虑确实很实用)。

关于字体系列，字重和变体的说明

您可能注意到，我们一直在讨论为每种权重和样式 (即粗体，斜体以及斜体加粗) 创建特定的字体文件，而不是依赖于浏览器来合成它们。这样做的原因，是大多数字体对于粗体和斜体都有非常特殊的设计，它们通常包含完全不同的字符 (例如，小写字母的“a”和“g”在斜体中常常是完全不同的)。在使用非可变字体时，为了最准确地反映字体设计，避免浏览器之间的差异以及它们如何合成或不合成不同的样式，在需要的地方加载特定的字体文件会更为准确。

您可能还会发现一些可变字体分为两个文件：一个用于正体及其所有变体，另一个包含斜体变体。有时这样做是为了在不需要或不使用斜体的情况下减小整体文件大小。在所有情况下，仍然可以通过通用的 font-family 名称链接它们，以便您可以使用相同的 font-family 和相应的 font-style 来调用它们。

可变轴

可变字体新格式的核心是可变轴的概念，其描述了字体设计中某一特性的允许变化范围。 例如： “字重轴”描述了字体的粗细； “宽度轴”描述了字体的宽窄； “斜体轴”描述是否使用斜体字形并且可相应地开关； 等。 请注意，轴既可以是 范围选择 又可以是 开关选择 。

  • 字重可能在 1-999 之间，
  • 而斜体可能只是简单的 0 或 1（关闭或打开）。

如规范中所定义，存在两种变形轴，注册轴和自定义轴：

  • 注册轴 最为常见，常见到制定规范的作者认为有必要进行标准化。目前注册的五个轴是字重（weight），字宽（width），倾斜（Slant），斜体（Italic）和视觉尺寸（optical Size）。W3C 已经将它们映射到现有的 CSS 属性。
  • 自定义轴 实际上是无限的：字体设计师可以定义和界定他们喜欢的任何轴，并且只需要给它一个四个字母的标签以在字体文件格式本身中识别它。您可以在 CSS 中使用这些四个字母的标签来指定沿该变化轴的点，您也将在下面的代码示例中看到。

注册轴

Microsoft OpenType 规范本身目前有五个注册轴——粗细、宽度、斜体、倾斜和视觉尺寸。Registration 意味着轴设置被明确定义并在许多不同的字体中普遍使用，并且在字体之间切换时可以保留而不是丢弃它们的设置。到目前为止，Microsoft 已经定义了以下轴：

  • 字重（Weight）值为 100 为细，400 为常规，800 为超粗
  • 字宽（Width），其中 100 为正常宽度，200 为双宽度，50 为半宽度
  • 斜体（Italic），其中 0 表示罗马字母，1 表示斜体形式
  • 倾斜（Slant），其中值以度为单位设置倾斜角度
  • 视觉尺寸（Optical Size），其中值设置设计可以响应的点大小

字重 Weight ‘wght’

font-weight: 375;
font-variation-settings: 'wght' 375;

字宽 Width ‘wdth’

font-stretch: 115%;
font-variation-settings: 'wdth' 115;

斜体 Italic ‘ital’

font-style: italic;
font-variation-settings: 'ital' 1;

倾斜 Slant ‘slnt’

font-style: oblique 14deg;
font-variation-settings: 'slnt' 14;

视觉尺寸 Optical Size ‘opsz’

基于物理尺寸改变字形整体笔划厚度的实践，可以很好地转化为数字显示时补偿屏幕质量和物理尺寸渲染

font-optical-sizing: auto;
font-variation-settings: 'opsz' 36;

自定义轴

自定义轴可以是字体设计师想象的任何设计变化轴。可能有一些会变得相当普遍，甚至演变成注册轴。

  • “Recursive 使用其 Casual 轴来提供一系列个性，让您能够为任何上下文获得正确的基调。沿着这个轴，字体在笔划曲率、对比度和终端上进行调整，从坚固、理性的线性变为友好、充满活力的随意。” –https://www.recursive.design/

  • “Wonk 轴控制着‘wonky’字符的替换。这些替换会在较小尺寸（18 磅及以下）时自动切换，但可以在较大光学尺寸时手动切换。h、n 和 m 字形的“精简”是从温莎借来的一个特征。” – fraunces.undercase.xyz

@font-face 使用

使用 CSS font-variation-settings 属性设置四个轴：粗细、宽度和两个自定义轴 在 CSS 中，font-weight和font-stretch直接使用数值控制 Weight 和 Width 轴。对于其他轴，新的font-variation-settings属性可靠地设置任何轴值，尽管具有级联值，但它有助于使用 CSS 自定义属性。轴由它们的标签名称、四字符代码指定，例如“wght”表示重量，“wdth”表示宽度等。如果您想移交轴的控制权，请尝试使用用于滑块和一些 JavaScript（如本CodePen示例中所示）。

@font-face {
 font-family: 'MyVariableFontName';
 src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
 font-weight: 125 950;
 font-stretch: 75% 125%;
 font-variation-settings: 'slnt' 14;
}

Web

  1. variablefonts 字体设计入门
  2. v-fonts 是一个简便好用的可变字体公用资源搜寻网站，它包含目前大部分公开可用的可变字体，并提供字体基本信息、制作者、版权信息和下载渠道，用来找免费可商用的可变字体非常方便。
  3. Axis-Praxis 是一个按时间顺序收集可变字体资源的网站，网站历史可以追溯到 1991 年，因此收集了很多珍贵的历史资料。在 Axis-Praxis 上我们可以在一个完整的版式内预览可变字体的不同样式，支持修改文字对齐方式和颜色，也支持上传本地可变字体文件进行预览。
  4. Google variable fonts 列表
  5. Figma variable fonts 介绍
  6. Anicons 基于 Material Icons的 可变/彩色 字体动画

一些有趣的尝试：

扩展来源：