Web排版和传统的印刷排版之间的差距不是一点点，而且Web排版一直以来都令Web开发者感到头痛，由其是Web中的字体。或许你在平时开发Web页面或Web应用的时候已经发现在Web上需要渲染一些更具艺术风格的字体，或者希望在响应式Web排版的设计中让文字能根据断点做出相应的响应等。虽然通过一些技术手段可以实现类似的效果，但同时也会造成许多新的问题产生。幸运的是，2015年开始推出了OpenType字体格式，以一些非常显著的方式改变了开发者面临的实际困难。他们有能力在较小的文件下为Web带来更丰富的排版性，但随着新的可能性和优势，新的挑战和复杂性也随之出现。那么，OpenType字体的引入之后会给Web带来什么样的变化？我们又应该在Web中怎么使用？接下来，我们一起来探讨这方面的话题。

什么是可变字体？

可变字体是数字时代的一种字体技术。@John Hudson对可变字体是这样解说的：

可变字体文件是一种字体文件，它的行为类似于多种字体。

传统上，大多数网站使用的字体都属性同一字体族。每种字体都存储在一个单独的文件中，并具有一组独特的属性，比如字宽、字重和样式。现在，在一个OpenType变量字体文件中，可以存储多种字体样式，也就是说，可变字体将字体所有这些变化都存储在一个字体文件中，并且字体的大小相对较小。与静态字体相比，可变字体允许你在一个范围内使用字体的字宽、字重和样式等。

例如，大多数字体族都包含一组字体，这些字体具有100~900的不同字重。可变字体提供了在指定范围内使用任何字重的能力。因此，如果在你的网站上使用font-weight: 700是一个最佳的效果，那么你就可以使用字重为700的字体。

另外一点就是，可变字体文件要比静态字体文件小得多，这是因为可变字体中每个字符只有一个结构。构建此结构的点具有可操作性，比如可以移动这些点，从而创建出另一个权重的指令。然后插入各个样式，这意味着它们是在浏览器内动态绘制的。这也使得在半粗体和粗体之间生成不同的样式成为可能。

如果你感兴趣的话，还可以点击这里查看。

插值可以在不同的轴上发生变化，比如字重的轴上。这样可以创造一个具有层次感的字体样式。还有一些命名的实例，比如regular或font-weight: 700，都可以工作，但你还可以选择两者之间的任何设计。

可变字体可以包含多个轴。你可以添加一个字宽的轴到字重轴上，并获得更多的风格。由@Dalton Maag设计的Venn，在这些例子中使用的可变字体，支持300~800的字重和75%~125%的字宽。这意味着，如果你把这些范围（500×50）相乘，就可以得到25000种风格的Venn，而且文件大小约112kb，这已经是非常完美了。

在可变字体中，常见的“注册轴”有：字宽（width）、字重（weight）、斜度（slant）、斜体（italic）和光学尺寸（optical size）等，但注册轴是可以扩展的，这样设计师可以定义他们自己所需的自定义轴，并允许他们想要创建的任何类型的变化。

如何处理可变字体？

可变字体的处理主要取决于字体的设计。类型设计器提供了各种轴，这些轴描述了哪些属性是可变的，以及这些属性的允许范围。可变字体可以有两种类型的轴：注册轴和自定义轴。

注册轴是最常见的轴，并且是显式定义的。在可变字体设计中有五个注册轴，包括字重、字宽、斜体、倾斜和光学尺寸。每个注册轴都有一个对应的四个字母的标记，可以映射到现有的CSS属性。

注意：注册轴不是必须的特性。包含哪些注册轴主要取决于字体设计器。

除了注册轴之外，字体设计器还可以包含自定义轴。自定义轴让可变字体变得更具创造性，因为不限制自定义轴的范围、定义或数量。与注册轴类似，自定义轴具有相应的四个字母标记。但是，自定义轴的字母标记必须是大写的。例如，你定义了一个注册轴是grade，其对应的字母标记是 GRAD。

接下来，我们来看看这五个已注册的轴以及如何使用它们。

字重（Weight）

五个注册轴中可能属字重最明显，几乎所有的字体都至少设计普通（Regular）和粗体（Bold），而且还有像更轻（Lighter）、更薄（Thinner）和更粗（Bolder）等极端现象。对于可变字体，可以使用CSS的font-weight属性提供一个介于为字体定义的最小值和最大值之间的数字，而不仅仅是一个关键词（比如normal或bold）。根据OpenType规范，对于任何给定的字体，400对应的是normal，但是在实践中，你将看到目前它可以根据字体的不同而有很大的变化。

p {
    font-weight: 425;
}
strong {
    font-weight: 675;
}

如果要使用变化轴，就需要使用CSS的font-variation-settings属性。比如像下面这样使用：

:root {
    --text-vf-wght: 400; 
}

p {
    font-variation-settings: "wght" var(--text-vf-wght);
}

在上面折例子中，wght对应的是CSS的font-weight，而var(--text-vf-wght)是其值，即400。

字宽（Width）

字体设计的另一个常见变化是字宽。它通常被称为压缩（Condensed）或扩展（Expanded）。根据相关规范可得知，100对应的是normal字宽，其有效值是1~1000。和字体权重（字重）类似，在CSS中也有相应的标准属性font-stretch，并以百分比的形式表示。在早期阶段，许多类型设计人员不一定遵守这个标准的数值范围，所以在CSS中看起来有点奇怪。但是3%~5%的范围仍然有效的，即使在这种情况下，5%实际上是正常的宽度。

在Web的使用中，可以像字宽类似有两种方式。第一种是使用CSS标准属性font-stretch：

p {
    font-stretch: 89%;
}

也可以像下面这样使用font-variation-settings属性：

:root {
    --text-vf-wdth: 95;
}

p {
    font-variation-settings: 'wdth' var(--text-vf-wdth);
}

斜体（Italic）

有的时候一些字体是不包含斜体风格的类型，但这种类型有的时候却又或多或少有所需。在大多数情况下，它是一个布尔值0或1。通常小写字母a或g的斜体形式略有不同。虽然有可能有一个范围，而不是严格意义上的0或1，但关闭或打开场景可能是你遇到的最常见的情况。不幸的是，尽管它的目的是和CSS的font-style:italic相匹配，但这是浏览器尚未完全实现的一个方面，因此我们不得不依赖font-variation-settings属性。

:root {
    --text-ital: 0;
}

body {
    font-variation-settings: 'ital'