CSS小技巧使用 font-variation 让文字起飞

今天逛codepen的时候发现了一个不错的文字动画效果，如此丝滑飘逸的效果必须得研究研究，可以看到字体粗细切换过渡效果很均匀，不像我们平常使用字体时设置 font-weight 的效果，日常设置字重的时候并不是每个值都会生效，只会有几个区间的值是可用的，以下代码给6个p标签设置font-weight 从 100 到 600：

@for $i from 1 through 6 {
  p:nth-child(#{$i}) {
    font-weight: 100 + 100 * ($i - 1);
  }
}

可以看到并不是每个阶段字重都有变化的，当然这和不同的字体和是否中英文有一定的关系，但是设置字重的效果都是不够理想的状态。

这里就要引出今天文章所讲的可变字体了，基于可变字体（font-variation）将不再有这种困扰，当然也会有一定的弊端。

什么是可变字体

可变字体（Variable Fonts），也称为多轴字体、自由度字体或超级字体，是一种新兴的字体技术，它是一种可以在多个自由度上进行动态调整的字体格式。与传统字体不同的是，可变字体能够在单个字体文件中包含多种字重、宽度、倾斜和其他轴的变体，而不需要使用多个不同的字体文件。

简单理解可变字体就是通过使用可变字体，所有字重、字宽、斜体等情况的组合都可以被装在一个文件中。相应的弊端就是这个文件可能比常规的单个字体文件更大了。

可变字体支持使用font-variation-settings属性来控制字体的各种轴，通过调整这些轴的值，可以实现自定义字体样式的效果。

以下设置一个可变字体的粗细从 100 到 600，

font-variation-settings: "wght" 100, "ital" 0;

可以看到这次的字体是均匀的变化粗细，就如同设置 font-weight: 100到 font-weight: 600 的逐渐变化。

可变字体浏览器兼容情况，可以看到基本的浏览器都已经支持。

如何使用

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

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

找到可用的可变字体

如果你想要使用它，你首先要找到相关字体资源。在这个网站 v-fonts.com 你能找到很多可变字体，很多都是在github开源，并且可以直接下载的。

在CSS中使用

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

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

每个可变字体都有不同的轴和不同的范围，如果你不知道可变字体能做什么改变，你可以使用这个（wakamaifondue.com）在线工具，可以帮你生成现成的css使用。

目前可以通过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%;
}

如下所示是一个例子：

h1 {
  font-family: 'Inter Variable', sans-serif;
  font-variation-settings: 
    "wght" 700, 
    "ital" 1, 
    "opsz" 48;
}

在这个例子中，我们将可变字体‘Inter’设置为700字重、1倾斜度和48像素字号的标题字体。可以看到，通过font-variation-settings属性，我们可以方便地控制自定义字体的不同轴，实现更加细腻、灵活的排版效果。

首图实现代码

首图的字体有如同呼吸，飘逸的感觉，核心是基于可变字体改变字体的粗细，并给不同的字符增加不同的延迟动画效果即可达到最终的效果。

• 改变字体粗细animation动画

@keyframes change {
  0% {
    font-variation-settings: "wght" 900, "ital" 1;
  }

  50% {
    font-variation-settings: "wght" 100, "ital" 0;
  }

  100% {
    font-variation-settings: "wght" 900, "ital" 1;
  }
}

• animation动画执行相关参数

  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: change;
  transition-timing-function: ease-in-out;

• 这里实现的每一个文字都是一个标签，所以给每一个文字都增加了不同的延迟执行动画时间

  @for $line from 1 through 4 {
    @for $letter from 1 through 10 {
      &:nth-child(#{$line}) span:nth-child(#{$letter}) {
        animation-delay: #{$letter * 0.1s + $line * 0.2s};
      }
    }
  }

代码并不多，但实现的效果很不错，基于可变字体设计，我们可以实现更加智能、美观、易读的排版效果，让文字内容更加生动、丰富。

在线效果预览：https://code.juejin.cn/pen/7234826432050888765

使用案例

以下是一些看到的案例效果，供大家参考。

国内常用的中文字体思源黑体也支持可变字体。

这个Google动画和本文头图的效果类似，给不同的字符加了不同的延迟加粗字体动画。

这个效果通过改变不同单词的可变字体的字重和宽窄呈现出一种不一样的效果。

以下的几个效果图都来源于v-fonts.com，诸如此类的效果还有很多，总共可变字体有三百多个，大家有兴趣的可以去找找看。

通过改变animation值可以让小图标动起来，是不是打开了很多新的思路。

这个字体比较有特色，大写字母是在上方有一根长长的线，小写字母是在下方有一根线，通过调整tracking轴的数值可以改变横线的长度。

这个字体就是一条波浪线，通过调整Width轴可以改变波浪的大小和幅度，都可以基于这个可变字体做水波纹效果了。

最后

关于可变字体的详细介绍使用大家可以看这篇文章 「variable fonts - 更小更灵活的字体」。可变字体的设计让文字内容更加生动、丰富，有兴趣的朋友可以试试看～

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

参考

variable fonts - 更小更灵活的字体：github.com/FoxDaxian/memory/issues/4

Variable Font Animation： codepen.io/typeforward/pen/abRpoxV