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

2023-05-28
广东
本文字数：2429 字
阅读完需：约 8 分钟

今天逛 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