明天访问codepen的时候，发现文字动画效果不错。 如此丝滑轻盈的效果必须要研究一下。 可以看到字体粗细切换过渡的效果非常均匀，不像我们平时使用字体时设置font-weight的效果。 日常设置字体粗细时，并不是每个值都会生效，只有少数几个值范围可用。 以下代码将 6 p 标签的字体粗细设置为从 100 到 600：
@for $i from 1 through 6 {
p:nth-child(#{$i}) {
font-weight: 100 + 100 * ($i - 1);
}
}
可以看出，每个阶段词权重都没有变化。 其实，这与不同的字体以及是中文还是英文都有一定的关系，设置字重的疗效并不理想。
这里我们将介绍一下明天文章中提到的可变字体。 基于可变字体（font-variation），就不会出现这样的混乱，而且事实上还会产生一定的恶果。
哪些是可变字体
可变字体（VariableFonts），又称多轴字体、自由字体或超级字体，是一种新兴的字体技术，是一种可以多自由度动态调整的字体格式。 与传统字体不同，“可变字体可以在单个字体文件中包含多个粗细、宽度、倾斜和其他轴变体，而不需要使用多个不同的字体文件。”
对可变字体的简单理解就是css波浪线，通过使用可变字体，可以将字重、字宽、斜体等所有组合加载到一个文件中。 相应的结果是该文件可能比常规的单一字体文件大。
可变字体支持使用 font-variation-settings 属性来控制字体的各个轴。 通过调整这些轴的值css波浪线，可以达到自定义字体样式的效果。
下面将可变字体的粗细设置为从 100 到 600，
font-variation-settings: "wght" 100, "ital" 0;
可以看到，这次字体的粗细是均匀变化的，就像设置font-weight: 100到font-weight: 600并逐渐变化一样。
可变字体的浏览器兼容性表明基本浏览器已经支持它们。
如何使用
这是由字体设计者决定的。 字体设计提供了各种可以更改的轴，例如粗细、长度和任何合理的范围。 下面提供了几种常用的保留轴：
查找可用的可变字体
如果要使用它，首先要找到相关的字体资源。 在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属性，我们可以方便地控制自定义字体的不同轴，以实现更加饱满灵活的排版效果。
国家地图实现代码
国图的字体给人一种呼吸和轻盈的感觉。 核心是在可变字体的基础上改变字体的粗细，针对不同的字符减少不同的延迟动画效果，以达到最终的效果。
@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-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};
}
}
}
代码不多，但是效果很好。 基于可变字体设计，我们可以实现更加智能、美观、易读的排版效果，使文字内容更加生动、丰富。
在线功效预览：
用例
以下是所审理案件的部分疗效，供大家参考。
国外常用的英文字体思源宋体也支持可变字体。
这个谷歌动画与本文的头像效果类似，为不同的角色添加了不同的延迟和粗体字体动画。
该疗效通过改变不同词组的可变字体的粗细和宽度，表现出不同的疗效。
下面的疗效图均来自v-fonts.com。 类似的疗效还有很多。 总共有300多种可变字体。 如果你有兴趣，你可以找到他们。
通过改变动画值，小图标可以向上移动。 它会带来很多新想法吗？
这个字体很有特色。 小写字母在顶部有一条长线，大写字母在底部有一条线。 通过调整跟踪轴的值可以改变水平线的粗细。
这个字体是一条波浪线。 通过调整Width轴，可以改变波浪的大小和幅度，基于这个可变字体可以做出水波纹的效果。
终于
关于可变字体的详细介绍，可以阅读这篇文章《variablefonts-更小更灵活的字体》。 可变字体设计使文字内容更加生动、丰富。 有兴趣的同学可以尝试一下~
如果您看完本文后觉得有用，记得点赞支持哦。 说不定哪天你也能用到呢~
发表评论