CSS之可变字体

smallbone
1,221 阅读6分钟

常规的Web字体会为每一个weight和样式的字体创建对应的文件，比如你想要有三种字重（regular，medium，bold）和两种样式（regular ，italic），那么你就需要六个不同的字体文件。

加载这么多字体文件会有不少网络开销，而且每个字体文件也不小，这对网页性能也会有不小的影响。而可变字体正是解决以上问题的良方, 并且现代主流的浏览器都已经支持此特性了。

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

使用可变字体的想法是，字体具有可以调整的参数，以控制字体的输出效果。

在标准的字体中，你只能选择两三种字重，但是通过可变字体，你可以有几百种选择。

并且可变字体也不仅仅只是简单的加粗字体，而是非常定制化的，如下图所示：

image.png 可变字体新格式的核心是可变轴的概念，其描述了字体设计中某一特性的允许变化范围。 例如‘字重轴’描述了字体的粗细；“宽度轴”描述了字体的宽窄；“斜体轴”描述是否使用斜体字形并且可相应地开关；等。请注意，轴既可以是范围选择又可以是开关选择。字重可能在1-999之间，而斜体可能只是简单的0或1（关闭或打开）。

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

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

可变字体包含5个标准可调整的注册轴

  • wght (weight) 定义了字形的笔画粗细范围（在印刷术语中称为轻重）的设计轴。 很长一段时间，CSS都能够通过 font-weight) 这个采用100到900之间的以100为增量的数字值以及类似于 normal 或 bold 等这样有相应数字值的别名（在这种情况下为400和700）的关键字的属性来实现。在处理非可变或可变字体时仍然会用到这些数值或关键字，但对于可变字体，1到1000之间的任何数字都是有效的。
  • wdth (width) 定义字形可以是多窄或多宽（印刷术语中称为压缩或扩展）的设计轴。 这通常在CSS中通过使用 font-stretch 属性设置，该属性值表示为高于或低于“正常”的百分比（100％），任何大于0的数字在技术上都是有效的
  • ital (italic) 仅可以打开（1）或关闭（0）; 而没有中间值
  • slnt (slant) 与真正的斜体不同之处在于它改变了字体的角度但不执行任何类型的字符替换。 它也是可变的，因为它表示为数值范围。 这允许字体沿该轴的任何位置变化。 允许的范围通常为0（直立）到20度
  • opsz (optical size) 视觉尺寸是指基于物理尺寸改变字形的整体笔画厚度的做法。 如果尺寸非常小（例如等于10或12px），则字符将具有整体较粗的笔画，可能还会进行其他小的修改，以确保以较小的物理尺寸复制和可读性。 相反，当使用更大尺寸（如48或60px）时，笔画的粗细重量可能会有更大的变化，外观会更接近原始设计意图。

使用Google字体上的可变字体

Google字体上包含了许多可变字体，我们可以直接使用，或者下载到本地服务器使用（避免被墙的用户无法下载字体文件）。将下面的link标签添加到HTML文件中就可以直接使用Google提供的可变字体：

<link rel="preconnect" href="<https://fonts.gstatic.com>">
<link href="<https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap>" rel="stylesheet">

第一行的link表示预加载，第二行link中family=Raleway:ital,wght表示字体名称是Raleway， 冒号后面的ital, wght表示注册轴属性，@后面对应的是注册轴的值。如0,100..900 表示正常字体字重值的范围在100至900之间；1,100..900 表示斜体字并且字重值的范围在100至900之间。display=swap 表示font-display的属性值，如果想知道font-display属性是如何工作的，可参考上一篇文章。

使用自托管的可变字体

从Google字体或者其他第三方下载好免费的可变字体后，我们可以在@font-face声明中使用：

@font-face {
  font-family: 'Recursive';
  src:
    url('/fonts/recursive-variable.woff2') format('woff2 supports variations'),
    url('/fonts/recursive-variable.woff2') format('woff2-variations');
  font-weight: 300 1000;
  font-display: fallback;
}

如果我们想使用“自定义”变体，比如“ casual”，我们需要指出它是一个特殊的.woff2 格式。这最初是用woff2-variations来完成的，但后来更新为 woff2 supports variations 了。在这个过渡时期，我们需要两者都提供。

font-weight: 300 1000; 表示我们可以使用的字重范围在300值1000之间（包括）

接着我们就可以在CSS中使用可变字体了：

.hello {
  font-weight: 777;
}

使用可变字体可以指定@font-face中字重范围内的任何值，不像传统字体那样只能在某几个整数之间选择。

至于自定义可变字体的注册轴属性，我们可以使用font-variation-settings属性来设置

image.png

font-variation-settings接受以逗号分隔的设置列表。每个设置调整一个轴(在引号中四个字母的字符串)和一个值(总是一个数字)

每个内置的轴也可以用纯 CSS 声明来指定:

.with-settings {
  font-variation-settings:
    "wght" 750,
    "wdth" 125,
    "slnt" -10;
}

/* 等于下面的CSS: */
.without-settings {
  font-weight: 750;
  font-stretch: 125%;
  font-style: oblique -10deg;
}

自定义轴属性必须用大写，以区分内置与自定轴：

.fun-heading {
  font-variation-settings:
    "slnt" -10, /* 内置轴, “slant” */
    "CASL" 0.8, /* 自定义轴, “casual” */
    "CRSV" 1; /* 自定义轴, “cursive” */
}

需要注意的是：每种字体都有自己的轴和值的范围，因此你需要查阅每种字体的文档，以确定你有哪些选项。

avatar
文章
阅读
粉丝