Variable Fonts - 可变形字体

对于经常接触字体的前端开发者来说，引入字体可能是一个“技术活”——不同的字宽、字重以及样式的字体都有可能需要我们单独引入。

以MacOS系统内置的“苹方”字体为例，自带“极细（Ultra Light）”、“纤细（Thin）”、“细（Light）”、“常规（Regular）”、“中黑（Medium）”、“中粗（Semibold）”六种字重，占用体积80M。对于这样的系统字体而言，我们使用时并无需引入，只需设置字体集即可，无需考虑字体引入的速度问题。

引入非系统自带字体时，我们可以通过压缩字体减少体积后引入，不过压缩只会减少字体支持的字符集，对不同字重、字宽等有需求时，依然需要引入相应的字体。

上图截取自 https://www.foundertype.com/

可变形字体

为了应对这些问题，Adobe、Microsoft、Apple、Google联合推出OpenType1.8版本，加入了Variable Fonts（可变形字体）。

可变形字体看起来像是不同字重、字宽或不同样式的字体的合集，然而，可变形字体通过轴（Axis）来描述字体轮廓点如何变化，以达到不同的字重、字宽或样式的变化，因此仅使用一套轮廓点的可变形字体体积比普通字体集会小。

可变形字体的秘密 - 变形轴

可变形字体通过变形轴（variation axis）来描述如何渲染展示字体，可以在css中通过font-variation-settings属性来修改：

1. wght - 字重（font weight），用于定义笔画的粗细，可变范围1-999，对应font-weight属性。在使用非可变形字体时，我们只能使用100-900并以100步长递增或者normal、bold这样的别名来定义字重。在使用可变形字体时，我们可以用粒度更小的方式修改字重。

.font-weight-normal {
  font-weight: 400;
  font-variation-settings: 'wght' 400;
}

2. wdth - 字宽（font width），用于定义字形的宽窄，对应font-stretch属性。

.font-stretch-115 {
  font-stretch: 115%;
  font-variation-settings: 'wdth' 115; /*设置时不需写上百分比符号。*/
}

3. ital - 斜体（italic），用于设置字形展示为正体或斜体，对应font-style: italic。斜体的变化没有中间值，只有正体和斜体的变化。

.font-italic {
  font-style: italic;
  font-variation-settings: 'ital' 1;
}

4. slnt - 倾斜（slant），与ital不一样的是，slnt可以设置字形倾斜的中间值，还可以根据设计设定顺时针或逆时针的倾斜。

.font-slant-30 {
  font-style: oblique 30deg;
  font-variation-settings: 'slnt' 30; /*此处也不需设置单位*/
}

5. opsz视觉尺寸（optical size），与字重的变化不同，视觉尺寸的变化更注重不同字号下字体笔画的变化，保证在不同尺寸下的可能性。

以上五种变形轴又成为保留轴（registered axis），同时字体设计师可以根据需要创建自定义轴（axis），详情可见 https://docs.microsoft.com/zh-cn/typography/opentype/spec/dvaraxisreg

如何使用

已有部分系统字体变成可变字体，不过第三方字体仍需我们引入后才可使用。我们依旧使用@font-face引入：

@font-face {
  font-family: 'source sans';
  src: url(SourceSansVariable.woff2) format("woff2-variations"),
       url(SourceSans.woff2) format("woff2”);
  font-weight: normal;
  font-style: normal;
}

前面的字体src表示可变形字体，后面表示普通字体，方便兼容旧的浏览器。

/*支持的浏览器*/
h1 {
  font-family: "source sans";
  font-variation-settings: "wght" 300, "wdth" 120;
}
/*不支持的浏览器*/
h1 {
  font-family: 'source sans';
  font-weight: 300;
  font-stretch: 120%;
}

上面的两种写法，在支持可变形字体的浏览器上的效果是等同的。我们可以通过CSS Media Query，在支持可变形字体的浏览器上，增强展示效果。

@supports (font-variation-settings: normal) {
  /* TODO */
}

应用

自可变形字体发布以来，操作系统、浏览器、排版软件、设计师、字体厂商都在积极跟进。

MacOS 10.13+和Windows 10都已经系统性支持可变字体。

从caniuse.com数据可以看到，目前主流浏览器均已支持：

在中文字体方面，方正、文鼎都已推出可变形字体，可根据需要使用。不过相较于中文字体的复杂，英文可变字体相对就丰富多了。https://www.axis-praxis.org/ 和 https://v-fonts.com/ 都提供了可变字体的预览。

动画

得益于多种变形轴的加入，在设置文字动画时，不再局限于文字的加粗、字号变化等常规操作，现在可以根据设计师的需求，进行文字笔画的变形、圆角等操作。更骚的是，有设计师做出了图形可变字体，再结合动画，可以玩出更多的花样。

(来自zycon字体）

自适应

页面在前面也介绍过，可以通过视觉尺寸来控制笔画的变化，当然，在不同尺寸的设备上，通过设置不同字重、字宽也可以达到增强可读性的目的。

@media screen and (max-width: 699px) and (min-width: 460px)
h1 {
  font-size: 2.5rem;
  font-variation-settings: "wght" 500, "wdth" 100;
}

@media screen and (min-width: 800px)
h1 {
  font-variation-settings: "wght" 300, "wdth" 120;
  font-size: 3rem;
}

展望

字体文件体积大、引入文件数量多是目前我们关注到的制约字体在web应用上的一个痛点，在即将到来的5G时代可能并不是一个需要关注的小问题。不过可变形字体确实能够解决排版问题、提升交互，在不久将来，更注重视觉可读性的网站、APP相信将会越来越多。撒花。

参考文档

1. https://css-tricks.com/one-file-many-options-using-variable-fonts-web/

2. https://css-tricks.com/weird-things-variable-fonts-can-do/

3. https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/

4. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide