今天，在 CodePen 上看到一个很有意思的效果 -- GSAP 3 ETC Variable Font Wave，借助了 JS 动画库 GSAP 实现，一起来看看：
我寻思着能否使用 CSS 复刻一版，鼓捣了一会，利用纯 CSS 成功实现了原效果。
上述效果，最核心的就是文字的动画，文字从较细贴着较紧，到较粗隔着较远不断变化。有人会认为这里是 transform: scale()，实则不然。
scale 是等比例放大缩小一个物体，而仔细观察上述效果，明显是有字体的粗细、字体的字宽的变化。这里，其实用到了 CSS 比较新的特性 -- 可变字体，也就是 font-variation。
本文，将借助这个效果，介绍一下什么是 CSS font-variation。
什么是 CSS font-variation，可变字体？根据 MDN -- Variable fonts，可变字体（Variable fonts）是 OpenType 字体规范上的演进，它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。我们只需通过CSS与一行 @font-face 引用，即可获取包含在这个单一文件中的各种字体变体。
emm，概念有点难理解，简单解释一下。
与可变字体对应的，是。
标准（静态）字体就是只代表字体的某一特定的宽度/字重/样式的组合的字体文件，通常我们在页面引入的字体文件都是这种，只代表这个字体的某一特定的宽度/字重/样式的组合。
而如果我们想引入一个字体家族（譬如 Roboto 字体族），它可能包含了 “Roboto Regular”(常规字重)、“Roboto Bold”（粗体），或是 “Roboto Bold Italic”（粗体+斜体） 等一系列字体文件。这意味着我们可能需要 20 或 30 个不同的字体文件才能算是有了一整个字体家族（对于有着不同宽度的大型字体来说，这个数量还要翻上几倍）。
而可变字体 -- font-variation，可以将它理解为 all in one，通过使用可变字体，所有字重、字宽、斜体等情况的排列组合都可以被装进一个文件中。当然，这个文件可能比常规的单个字体文件大一些。
静态字体的局限性举个例子，在 Google Font，我随便选取一个标准静态字体，实现一个字体 font-weight 的变化动画：
<p>CSS font-variation</p> <p>CSS font-variation</p> <p>CSS font-variation</p> <p>CSS font-variation</p> <p>CSS font-variation</p> <p>CSS font-variation</p> @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap'); p { font-family: 'Lato', sans-serif; font-size: 48px; } p:nth-child(1) { font-weight: 100; } p:nth-child(2) { font-weight: 200; } p:nth-child(3) { font-weight: 300; } p:nth-child(4) { font-weight: 400; } p:nth-child(5) { font-weight: 500; } p:nth-child(6) { font-weight: 600; }看看结果：
并没有我们想象中的，因为字体粗细从 100 到 600，所以字体依次变粗的情况，一共只有两种字重：
当 font-weight: 处于 100 - 500 的时候，其实都是 font-weight: normal;
当 font-weight: 600 的时候，其实是命中了 font-weight: bold。
这个也就是传统静态字体的局限性，单一字体文件中，其实是不会有该字体的所有粗细、字宽的类型的。
可变字体的多样性接下来，我们换上可变字体。
加载可变字体的语法与其他 web 字体非常相似，但有一些显著的差异，这些差异是通过对现代浏览器中可用的传统 @font-face 语法的升级提供的。
基本语法是相同的，但是字体技术是不一样的，并且可变字体可以提供像对 font-weight 和 font-stretch 等描述符的允许范围，而不是根据加载的字体文件来命名。
下面，我们将加载一个支持字体粗细从 100 到 900，字体伸缩变形支持从 10% 到 400% 的 AnyBody 可变字体。
@font-face { font-family: 'Anybody'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations'); font-display: block; font-style: normal italic; font-weight: 100 900; font-stretch: 10% 400%; } p { font-family: 'Anybody', sans-serif; font-size: 48px; } p:nth-child(1) { font-weight: 100; } // ... p:nth-child(6) { font-weight: 600; }同样是设定字体粗细从 100 - 600，效果如下：
这一次，可以看到，字体有明显的均匀变化，支持 font-weight: 100 到 font-weight: 600 的逐渐变化。这儿就是可变字体的魅力。
理解 font-variation-settings除了直接通过 font-weight 去控制可变字体的粗细，CSS 还提供了一个新的属性 font-variation-settings 去同时控制可变字体的多个属性。
可变字体新格式的核心是可变轴的概念，其描述了字体设计中某一特性的允许变化范围。
所有可变字体都有至少有 5 个可以通过 font-variation-settings 控制的属性轴，它们属于注册轴（registered），能够映射现有的 CSS 属性或者值。
它们是：
字重轴 "wght"：对应 font-weight，控制字体的粗细
宽度轴 "wdth"：对应 font-stretch，控制字体的伸缩
斜度轴 "slnt" (slant)：对应字体的 font-style: oblique + angle，控制字体的倾斜
斜体轴 "ital"：对应字体的 font-style: italic，控制字体的倾斜（注意，和 font-style: oblique 是不一样的倾斜）
光学尺寸轴 "opsz"：对应字体的 font-optical-sizing，控制字体的光学尺寸
好吧，可能会有一点点懵，没事，通过一个例子马上就能理解什么意思。