CSS小技巧：使用 font-variation 可变字体让文字起飞

2023-06-0511:38:17网页制作Comments1,157 views字数 2789阅读模式

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

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

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

可以看到并不是每个阶段字重都有变化的，当然这和不同的字体和是否中英文有一定的关系，但是设置字重的效果都是不够理想的状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

这里就要引出今天文章所讲的可变字体了，基于可变字体（font-variation）将不再有这种困扰，当然也会有一定的弊端。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

什么是可变字体

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

简单理解可变字体就是通过使用可变字体，所有字重、字宽、斜体等情况的组合都可以被装在一个文件中。相应的弊端就是这个文件可能比常规的单个字体文件更大了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

可变字体支持使用font-variation-settings属性来控制字体的各种轴，通过调整这些轴的值，可以实现自定义字体样式的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

以下设置一个可变字体的粗细从 100 到 600，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

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

可以看到这次的字体是均匀的变化粗细，就如同设置 font-weight: 100到 font-weight: 600 的逐渐变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

可变字体浏览器兼容情况，可以看到基本的浏览器都已经支持。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

如何使用

这个是根据字体的设计者来决定，字体的设计提供了各种各种可以被修改的轴，比如粗细，长短以及任何合理范畴之内的。下面提供几个常用的保留轴:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

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

找到可用的可变字体

如果你想要使用它，你首先要找到相关字体资源。在这个网站 v-fonts.com 你能找到很多可变字体，很多都是在github开源，并且可以直接下载的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

在CSS中使用

通过@font-face引入到页面内：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

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

每个可变字体都有不同的轴和不同的范围，如果你不知道可变字体能做什么改变，你可以使用这个（wakamaifondue.com）在线工具，可以帮你生成现成的css使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

目前可以通过font-variation-settings属性，我们可以方便地控制自定义字体的不同轴，比如设置如下代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

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

这段代码改变字体粗细为550，还有宽窄为125。在未来可能可以使用以下属性来得到同样的效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

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

如下所示是一个例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

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

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

首图实现代码

首图的字体有如同呼吸，飘逸的感觉，核心是基于可变字体改变字体的粗细，并给不同的字符增加不同的延迟动画效果即可达到最终的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/44538.html

改变字体粗细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};
      }
    }
  }