突破限制,CSS font-variation 可变字体的魅力 (3)

例如‘字重轴’描述了字体的粗细;“宽度轴”描述了字体的宽窄;“斜体轴”描述是否使用斜体字形并且可相应地开关;等。请注意,轴既可以是范围选择又可以是开关选择。字重可能在1-999之间,而斜体可能只是简单的0或1(关闭或打开)。

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

注册轴最为常见,常见到制定规范的作者认为有必要进行标准化。 目前注册的五个轴是字重,宽度,倾斜度,斜体和光学尺寸。

上文其实已经罗列了 5 个注册轴,并且简单介绍了它们的使用。再罗列一次:

字重轴 "wght":对应 font-weight,控制字体的粗细

宽度轴 "wdth":对应 font-stretch,控制字体的伸缩

斜度轴 "slnt" (slant):对应字体的 font-style: oblique + angle,控制字体的倾斜

斜体轴 "ital":对应字体的 font-style: italic,控制字体的倾斜(注意,和 font-style: oblique 是不一样的倾斜)

光学尺寸轴 "opsz":对应字体的 font-optical-sizing,控制字体的光学尺寸

自定义轴实际上是无限的:字体设计师可以定义和界定他们喜欢的任何轴,并且只需要给它一个四个字母的标签以在字体文件格式本身中识别它。

我们来看一个 自定义轴 的例子:

<p>Grade</p> p { font-family: "Amstelvar VF", serif; font-size: 64px; font-variation-settings: 'GRAD' 88; }

上述 font-family: "Amstelvar VF" 是一个可变字体,而 'GRAD' 属于自定义轴的一个,意为等级轴

等级轴 'GRAD':“等级”一词指的是字体设计的相对重量或密度,但与传统的“重量”不同之处在于文本占据的物理空间不会改变,因此改变文本等级并不会改变文本或其周围元素的整体布局。 这使得等级成为有用的变化轴,因为它可以变化或动画而不会引起文本本身的回流。

MDN 上有关于改变 'GRAD' 的值,对应字体变化的一个 DEMO,效果如下:

突破限制,CSS font-variation 可变字体的魅力

值得注意的是,自定义轴可以是字体设计师想象的任何设计变化轴。可能有一些会逐渐变得相当普遍,随着规范的发展甚至演变成注册轴。

去哪找可变字体?

OK,如果现在我想在业务中使用一下可变字体,去实现一个效果或者动画,可以上哪里寻找可变字体的资源呢?

这里有一个很不错的网站 -- Variable Fonts。

上面收集了非常多的 Variable Fonts,并且罗列出了它们在注册轴上支持的字体属性的范围,譬如支持字重从 100 到 700,我们可以自由进行调试预览

突破限制,CSS font-variation 可变字体的魅力

Can i Use(2022-02-20)

现在能够开始使用可变字体了吗?

截止至今天,Can i Use 的截图:

突破限制,CSS font-variation 可变字体的魅力

兼容性已经非常的不错了,不考虑 IE 系列的话可以上到实际的生产环境中去。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzjfyp.html