可变字体(Variable fonts)-更小更灵活的网页字体应用体系

[字研] 作者:三江堂主 浏览次数: 21/07/08 19:05
[TOC]

原文链接

variable fonts(下文中vf为缩写)是数字时代制作的字体技术,用更小的文件大小在web上提供更丰富的排版,但是一项新的技术往往伴随着新的挑战和复杂未知的情况。不过,我们要拥抱技术,那么怎么才能使用它呢?

让我们从以下几个问题去学习一下variable fonts。

什么是variable fonts?

有人解释它为一个存在多种字体格式单字体文件。一般来说,字体的不同格式,比如斜体、粗细、拉伸存储在分开的单个文件内,而现在,你可以存储多种字体格式在一个openType可变字体文件内,正因为如此,这个vf文件相对来说体积会更小。

在这里插入图片描述

多个静态字体文件可以被存储到一个vf文件

因为只有一种排版的轮廓点,所以文件体积很小。这些点决定了文字的直接表现。修改轮廓点的位置意味着能够动态的在浏览器里改变文字的样子。这使得在半粗体和粗体之间的转换成为可能。向下面这样:

在这里插入图片描述

修改vf字体的例子,这些轮廓点的数量没有变化,仅仅是位置发生了改变

在各种轴(将一个可修改范围抽象化为一条(x)轴,或者说横坐标)上可以以非常小的数值进行改变,比如粗细轴,一点点的修改就会发生很大的风格变化,像regularfont-weight: 700之间有其他的值可以进行指定。

在这里插入图片描述

一个vf字体可以有很多类似的,比如增加一个身高轴,就能延伸出更多风格的字体。也可以想想成为一个有x和y的坐标轴,当x轴的可修改范围为50,y轴的可修改范围为500的时候,你就会得到25000中不同风格的字体,并且文件大小也很可观。

在这里插入图片描述

各种各样的字体

variable fonts能做什么?

这个得根据字体的设计来决定,字体的设计提供了各种各种可以被修改的,比如粗细,长短以及任何合理范畴之内的。下面提供五个常用的保留轴:

  • wdth: 用于修改字的宽窄
  • wght: 用于修改字的粗细
  • ital: 是否倾斜,0为非倾斜,1为斜体
  • slnt: 用于修改字的倾斜程度
  • opsz: 对于字形的修改(待确认)

尽管宽窄、粗细是更为常见的供修改轴,但是也有一些自定义轴,比如衬线(衬线是字的笔画开始和结束部分的额外装饰)轴等。

在这里插入图片描述

通过改变生成的动画,有没有很酷炫?

拉伸或者扭曲字体会不会有不好的效果和影响?

当vf字体改变宽窄、粗细或者其他维度的时候,不会造成不好的影响。但是如果换做transform: scaleX(0.5),就会发生不好的影响,因为它直接修改了字体的设计,设计师看了会打人。

为什么拉伸或者扭曲字体是一个很严重的问题?因为字体设计师在每个字符的协调上下了很多心血,所以这样的字体符合正常的审美。而草率的拉伸或者扭曲字体会导致设计师的心血功亏一篑。即使修改之后的不同是很微小的,但是也会影响字体整体的外观和感觉。

在这里插入图片描述

仔细看上面这张图中的字母O,下面的O已经超出蓝色范围,而上面的依旧保持的很好。吐槽,本人没觉得有啥美感的丢失

variable fonts有哪些优点?

最明显的优点,或许你已经想到了,就是提供丰富的自定义web字体

网站开发者可以利用不同风格的字体去突出某些部分的趣味性和重要性,网站可以以编辑设计的方式处理更多的排版,提供更丰富的视觉展示和个性化方案。我创建了一个测试网站,在这个网站上,我限制颜色风格,换句话说,我仅仅用了4中左右的颜色来表现网站的层次感,然后用了多大18中的字体去丰富网站。在我看来,这样比减少样式风格更加简介和独特。你可以点击右下角按钮来切换不同的字体主题,获得不同的体验。

在这里插入图片描述

一个使用字体变换改变网站风格的测试网站

更小的文件体积

vf字体用更小的文件带来更多的可选风格。比如你想使用三四种不同粗细的字体,你可以用vf字体来获得更小文件体积的收益。举个例子:Süddeutsche Zeitung Magazin
该网站的字体加起来一共有236kb大小,其中四中不同粗细的字体加起来共166kb,如果换用vf字体,可以较少到80kb,足足减少了50%!

在这里插入图片描述

如果使用vf字体,至少可以节约一半的带宽

细颗粒度的控制

vf字体在如何渲染字体上提供细颗粒度的控制,你可以设置font-weight:430来提供更好地效果。因为这是一个可选的,所以像font-weight:bold这样的方式,仍然是奏效的

更好地文字适配

如果vf字体提供宽窄轴操作能力,你可以让文字在移动设备上有更好的可读性。在宽一点的屏幕上,也能更好地利用空间。这个例子可以很清晰的展示这种效果: browser example

与动画结合

所有都可以通过css来产生一个过渡的动画效果。这能让你的网站带来很酷和充满活力的效果。在微软示例页面中,你可以通过滚动来查看令人印象深刻的动画效果。

一种更重视视觉美的文字

这个概念来自印刷技术,通常指在小字号的时候更加可读,大字号的时候更加富有个性。在金属活字时期(使用金属作为载体的活字印刷术),只能通过修改的文字尺寸来进行优化。后来,通过数字化技术,你可以设计一个适配所有尺寸的字体。现在相同的情况随着vf字体的出现得以解决。例如,小字号的时候笔画可以更粗一点,这意味着更低的对比度使可读性更高。另一方面,当大字号的情况下,空间更多,所以有更多的操纵性,和对比度。类似的变化在vf字体中可以在单一文件内逐渐产生。
在这里插入图片描述

怎么在web上使用variable fonts?

  1. 找到可用的vf字体
    这个技术还是非常积极地,所以,如果你想使用它,你首先要找到相关资源。这有一个资源可以供你使用,在这个网站里你能尝试很多vf字体,很多都是在github开源,并且可以直接下载的。这也有一些很不错的资源
  2. 整合到你的网站中的样式表内
    2018上半年,超过一般的浏览器已经支持的很好了。

    通过@font-face引入到页面内:

     @font-face {
         font-family: 'VennVF';
         src: url('VennVF_W.woff2') format('woff2-variations'),
             url('VennVF_W.woff2') format('woff2');
     }
    

    找到字体可变和可变范围,根据设计的不同的vf都有不同的和不同的范围,如果你不知道vf字体能做什么改变,你可以使用在线工具,他也可以帮你生成现成的css。
    然后我们进行css的开发,不过在这之前,先说一下即将在css4字体模块中增加的可以设置vf字体的高级属性

    • font-weight:可以设置1-999的任意数值
    • font-stretch:是一个百分比的值,100%是正常的,50%是紧缩的,200%是拉伸的,其对应的关键字应该可以使用,这对印刷来说是可怕的,因为它不能拉伸字体,拉伸字体会导致不好的结果,但是vf的改变是在涉及范围内的拉伸,是可以接受的。
    • font-style:一个倾斜的属性,从-90deg到90deg,当然关键字也是可以使用。90deg看起来是奇怪的,8deg是大部分字体中采用的最大值。
    • font-optical-sizing:这是一个新的属性,有两个可选属性autonone。一般来说,浏览器会设置为auto,但你也可以设置为none

      不是所有vf字体都能控制上面的属性,这得根据字体的设计和可用范围来决定。我做了一些测试,safari支持font-weightfont-stretch,并且,如果optical可用,它会自动打开optical sizing。但是使用font-style: italic的结果是,没有更新vf字体的italic范围。

      只有在sarari上,这些高级属性兼容的还可以。所以,如果想保证稳定性,你需要使用一个低级的属性:font-variation-settings,你可以设置四部分,其实和上面的差不多。

      p {
        font-family: "VennVF";
        font-variation-settings: "wght" 550, "wdth" 125;
      }
      

      这段代码改变字体粗细为550,还有宽窄为125。在不远的将来,你或许可以使用高级属性来得到同样的效果:

      p {
        font-family: "VennVF";
        font-weight: 550;
        font-stretch: 125%;
      }
      

      当然,vf字体其实还有更多的自定义可以使用,都可以使用font-variation-setting属性来设置:

      h1 {
        font-family: 'VennVF', sans-serif;
        font-variation-settings: "TRMC" 0, "SKLA" 0, "SKLB" 0, "TRME" 0;
      }
      

      效果看起来像这样:
      在这里插入图片描述

  1. 兼容不支持vf字体的浏览器

    如果你现在就想使用vf字体的话,在不支持的版本上,网站风格会和你想象中的完全不一样,所以我们需要一个回退方案,这个利用的css的特性查询功能:

     @supports (font-variation-settings: normar){
         /* set some property */
     }
    

    点击查看@supports的各浏览器兼容,个人认为兼容还是可以的。
    然后,像下面这样设置vf,就可以适配大部分浏览器了:

     body {
         font-family: 'Venn', sans-serif;
     }
    
     @supports (font-variation-settings: normal) {
         body {
             font-family: 'VennVF', sans-serif;
             }
     }
    

    解释一下:首先上面的body为正常的字体,下面为积极地做法,如果支持font-variation-settings,那么就采取vf字体,然后可以设置一些具体的字体细节。否则会静默失败。
    可能有人会用:not来配合@supports,有时候匹配成功不是因为not,而是因为@supports不支持,所以尽量避免。

有哪些潜在的缺陷需要注意?

vf字体为web字体带来了新的活力和发灰控件,但是,一项新的技术往往会伴随着很多我们需要注意的问题。

  • 太多的选项
  • 更多的与web无关的字体只是需要学习
  • vf字体不一定总会对性能有所提高
  • 你也许仍然需要多个字体文件以适配某些字体,比如罗马字体和斜体
  • 可能会因为著作权、许可证而造成其他问题

variable fonts何时才会相对成熟?

2018年大部分浏览器都已经支持了,很快移动设备也会支持,因为vf会节约很大的带宽。我期待2019年vf字体能够替换静态字体被用在各个web站点中。adobe和谷歌会在推动这项技术中一定会占主要部分,因为他们同样需要减少字体文件大小,虽然不知道这件事什么时候会发生。但是一定会很快。
我对文件大小没有太大的兴趣,我更多的兴趣实在使用更少的样色主题和更多的字体去设置网站的风格,像这个网站

参考链接

以下强译自:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

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

警告: 为了能够在您的操作系统上正确地使用可变字体,请确定您的操作系统已经升级到最新版本。例如各Linux发行版,应将Freetype升级到最新版本。10.13版本之前的macOS不支持可变字体。如果您的操作系统没有升级到最新版,您将无法在网页和Firefox Developer Tools中使用可变字体。

可变字体:何谓与何异

为了更好的理解可变字体有什么不同,我们有必要回顾一下什么是非可变字体,并对二者进行一番比较。

标准(静态)字体

过去,一个字体家族往往由大量独立字体文件组成,每个字体文件都代表某一特定的宽度/字重/样式的组合。因此你会看到有单独的字体文件叫做“Roboto Regular”、“Roboto Bold”,或是“Roboto Bold Italic”——这意味着你可能需要20或30个不同的字体文件才能算是有了一整个字体家族(对于有着不同宽度的大型字体来说,这个数量还要翻上几倍)。

在这样的情景下,为了在一个单纯显示进行正文展示的页面中使用一个字体,你至少需要四个字体文件:常规、斜体、加粗、斜体加粗。如果你想添加更多的字重,比如让题注更轻或让额外强调的地方更重,意味着你需要更多文件。这就导致了更多大量HTTP请求的产生,同时也需要下载更多的数据(通常每个文件至少有20k或更多)。

可变字体

通过使用可变字体,所有这些情况的排列组合都可以被装进一个文件中。这个文件可能比常规的单个字体文件大一些,但通常情况下,都不会大于,并且常常是小于你因为要展示正文所需要下载的四个文件的尺寸总和。使用可变字体的优势是你可以直接使用所有可用的字重、宽度和样式的字体,而不必像过去一样仅仅受限于使用其中单独的某一种。

这允许使用常见的排版技术,例如在不同的字重中设置不同大小的标题,以便在每种大小下都具有更好的可读性,或者在数据密集展示时使用稍窄一点的字体宽度。相比之下,在杂志的印刷系统中,在整个出版物中使用10-15种或更多不同的字重和宽度组合是很典型的——这比目前在web上的典型样式提供了更广泛的样式范围(或者仅从性能方面考虑确实很实用)。

关于字体系列,字重和变体的说明

您可能注意到,我们一直在讨论为每种权重和样式(即粗体,斜体以及斜体加粗)创建特定的字体文件,而不是依赖于浏览器来合成它们。这样做的原因,是大多数字体对于粗体和斜体都有非常特殊的设计,它们通常包含完全不同的字符(例如,小写字母的“a”和“g”在斜体中常常是完全不同的)。在使用非可变字体时,为了最准确地反映字体设计,避免浏览器之间的差异以及它们如何合成或不合成不同的样式,在需要的地方加载特定的字体文件会更为准确。

您可能还会发现一些可变字体分为两个文件:一个用于正体及其所有变体,另一个包含斜体变体。 有时这样做是为了在不需要或不使用斜体的情况下减小整体文件大小。 在所有情况下,仍然可以通过通用的 font-family 名称链接它们,以便您可以使用相同的font-family和相应的 font-style 来调用它们。

介绍“可变轴” (variation axis)

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

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

注册轴最为常见,常见到制定规范的作者认为有必要进行标准化。 目前注册的五个轴是字重,宽度,倾斜度,斜体和光学尺寸。 W3C已经将它们映射到现有的CSS属性,并在一个案例中引入了一个新的属性,您将在下面看到。

自定义轴实际上是无限的:字体设计师可以定义和界定他们喜欢的任何轴,并且只需要给它一个四个字母的标签以在字体文件格式本身中识别它。 您可以在CSS中使用这些四个字母的标签来指定沿该变化轴的点,您也将在下面的代码示例中看到。

注册轴和现有的CSS属性

在本节中,我们将通过示例和相应的CSS来演示已定义的五个注册轴。 在可能的情况下,包括标准语法和低级语法。 较低级语法(font-variation-settings)是为了测试对可变字体支持的早期实现而实现的第一个机制,并且需要使用五个注册轴之外的新轴或自定义轴。 但是,W3C的意图是在其他属性可用时不使用此语法。 因此,应尽可能使用相应的属性,font-variation-settings的低级语法仅用于设置值不可用的值或轴。

注意

当使用 font-variation-settings 时,请务必注意轴名称区分大小写。 注册轴名称必须为小写,自定义轴必须为大写。 例如:

font-variation-settings: 'wght' 375, 'GRAD' 88;

wght (weight) 是一个注册轴, GRAD (grade) 是一个自定义轴。

如果您使用 font-variation-settings 设置了值并想要更改其中一个值,则必须重新声明所有值。 您可以通过对各个值使用CSS自定义属性(CSS变量)来解决此限制,并只需修改单个自定义属性的值。 该指南末尾有示例代码
字重
字重(由 wght 标签表示)是定义了字形的笔画粗细范围(在印刷术语中称为轻重)的设计轴。 很长一段时间,CSS都能够通过 font-weight) 这个采用100到900之间的以100为增量的数字值以及类似于 normal 或 bold 等这样有相应数字值的别名(在这种情况下为400和700)的关键字的属性来实现。在处理非可变或可变字体时仍然会用到这些数值或关键字,但对于可变字体,1到1000之间的任何数字都是有效的。

应该注意的是,此时 @font-face 声明中没有办法将变量字体变形轴上的特定点“映射”到关键字 bold (或任何其他关键字)。 这通常可以很容易地解决,但在编写CSS时需要额外的步骤:

字宽

字宽(由 wdth 标签表示)定义字形可以是多窄或多宽(印刷术语中称为压缩或扩展)的设计轴。 这通常在CSS中通过使用 font-stretch 属性设置,该属性值表示为高于或低于“正常”的百分比(100%),任何大于0的数字在技术上都是有效的 - 尽管它的范围更有可能是接近100%的,例如75%-125%。 如果提供的数字值超出了字体编码的范围,浏览器应该以允许的最接近值渲染字体。

注意: 在使用 font-variation-settings 时不需要使用%。

font-stretch: 115%;

font-variation-settings: 'wdth' 115;

斜体

Italic(ital)轴的工作方式不同,因为它仅可以打开或关闭; 而没有中间值。 斜体设计通常包括与其正体截然不同的字形,因此在从正体到斜体的过渡中,通常会发生许多字形(或字符)替换。 Italic 和oblique 通常可以互换使用,但事实上实际上是完全不同的。 在这种情况下,Oblique 定义为术语 slant (参见下面的部分),并且字体通常具有一个或另一个斜体,但不是两者都有。

在CSS中,使用 font-style 属性对文本应用italic 和oblique 。

倾斜

Slant(由 slnt 标签表示),或者它经常被称为“oblique” - 与真正的斜体不同之处在于它改变了字体的角度但不执行任何类型的字符替换。 它也是可变的,因为它表示为数值范围。 这允许字体沿该轴的任何位置变化。 允许的范围通常为0(直立)到20度 — 可以使用该范围内的任何数值,因此字体可以倾斜一点点。 但是,-90-90度的任何值都是有效的。

视觉尺寸(Optical sizes)

这是数字字体和CSS的新功能,但其实对应于设计加工金属活字中的一项古老技艺。 视觉尺寸是指基于物理尺寸改变字形的整体笔画厚度的做法。 如果尺寸非常小(例如等于10或12px),则字符将具有整体较粗的笔画,可能还会进行其他小的修改,以确保以较小的物理尺寸复制和可读性。 相反,当使用更大尺寸(如48或60px)时,笔画的粗细重量可能会有更大的变化,外观会更接近原始设计意图。

虽然这样做最初是为了在油墨和纸张印刷过程中提供补偿(小尺寸铅字上非常细的线会很难印上,导致字形外观残损),但现在它很好地转化为在数字显示中对屏幕质量和物理尺寸渲染的补偿。

光学尺寸值通常旨在根据 font-size自动应用,但也可以使用较低级别的 font-variation-settings 语法进行操作。

创建了一个在CSS中中支持可变字体的新属性 font-optical-sizing (en-US) 。 使用 font-optical-sizing 时,唯一允许的值是 auto 或 none - 因此该属性仅允许打开或关闭光学尺寸。 但是,当使用 font-variation-settings: ‘opsz’ 时,您可以使用数值。 在大多数情况下,您可能希望将 font-size(正在渲染的类型的物理大小)与 opsz 值(使用 auto时应用光学尺寸的方式)进行匹配。 提供了特定值,以便在必要时(为了易认性,美观或其他原因 )可以应用特定值来覆盖默认值。

font-optical-sizing: auto;

font-variation-settings: 'opsz' 36;

自定义轴

自定义轴可以是字体设计师想象的任何设计变化轴。 可能有一些会变得相当普遍,甚至演变成注册轴。

Grade

由于在字体设计方面有着众所周知的历史,等级可能会成为更常见的自定义轴之一。设计不同等级的字体通常是根据预期的用途和印刷技术来进行的。 “等级”一词指的是字体设计的相对重量或密度,但与传统的“重量”不同之处在于文本占据的物理空间不会改变,因此改变文本等级并不会改变文本或其周围元素的整体布局。 这使得等级成为有用的变化轴,因为它可以变化或动画而不会引起文本本身的回流。

font-variation-settings: 'GRAD' 88;

使用可变字体: 改变 @font-face

加载可变字体的语法与其他web字体非常相似,但有一些显著的差异,这些差异是通过对现代浏览器中可用的传统@font-face语法的升级提供的。

基本语法是相同的,但是字体技术是不一样的,并且可变字体可以提供像对 font-weight 和 font-stretch 等描述符的允许范围,而不是根据加载的字体文件来命名。

@font-face {
 font-family: 'MyVariableFontName';
 src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
 font-weight: 125 950;
 font-stretch: 75% 125%;
}

注意: 并非所有浏览器都实现了字体格式的完整语法,因此请仔细测试。 如果您将字体格式设置为仅文件格式,而不是格式变体(即 woff2 而不是 woff2-variations),那么支持可变字体的所有浏览器仍将渲染它们,但如果可能,最好使用正确的语法。

注意: 如果使用适当的属性(即 font-weight或 font-stretch),提供 font-weight, font-stretch和 font-style的值范围将使浏览器不会尝试渲染超出该范围的轴,但不会阻止您通过 font-variation-settings 使用无效值,因此请小心使用。

使用旧版本浏览器
可以使用CSS特性查询检查是否支持可变字体(请参阅 @supports),因此在生产中,可以在特性查询块内使用可变字体。

h1 {
 font-family: some-non-variable-font-family;
}

@supports (font-variation-settings: 'wdth' 115) {
 h1 {
    font-family: some-variable-font-family;
 }
}
点此关闭窗口

快捷键ESC

手机浏览更方便: