关于前端:CSS小技巧使用-fontvariation-让文字起飞

明天逛 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 开源，并且能够间接下载的。

通过 @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

关于前端:CSS小技巧使用-fontvariation-让文字起飞

什么是可变字体

如何应用

找到可用的可变字体

在 CSS 中应用

首图实现代码

应用案例

最初

参考