Web中的可变字体

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

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

什么是可变字体?

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

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

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

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

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

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

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

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

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

如何处理可变字体?

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

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

注册轴 字母标记 CSS属性
Weight wght font-weight
Width wdth font-stretch
Italic ital font-style
Slant slnt font-style
Optical Size opsz font-optical-sizing

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

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

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

字重(Weight)

五个注册轴中可能属字重最明显,几乎所有的字体都至少设计普通(Regular)和粗体(Bold),而且还有像更轻(Lighter)、更薄(Thinner)和更粗(Bolder)等极端现象。对于可变字体,可以使用CSS的font-weight属性提供一个介于为字体定义的最小值和最大值之间的数字,而不仅仅是一个关键词(比如normalbold)。根据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)

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

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

body {
    font-variation-settings: 'ital'
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/variable-fonts.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部