前端怎么加粗字体_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相信将会越来越多。撒花。

参考文档

https://css-tricks.com/one-file-many-options-using-variable-fonts-web/
https://css-tricks.com/weird-things-variable-fonts-can-do/
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide