前言

什么是 Variable Font（一般简称 vf）？普通的字体可能有多个字重（比如 light、regular、bold）、斜体（italic）等样式，他们分别是一个个独立的静态的文件。

而可变字体则是在保证字体风格的前提下，通过程序可以任意调整字重、倾斜度，甚至拉伸程度，而字体文件体积却更小。

想体验的话，可以在建站网站 Cargo https://cargo.site/Fonts 在线体验下，拖动滑块：

在 Android 一年前开始大力推广的 Material You 设计语言里，让系统底层全面支持可变字体；MIUI 的小米兰亭可变字体，让用户通过拖动滑块的方式，找到自己喜欢和习惯的界面字体粗细；再到最近 Figma Config 2022 大更新里，也支持了可变字体，一下子好像把这个概念推到了比较热的程度。

Figma 官方对可变字体的功能介绍和普及：https://www.figma.com/typography/variable-fonts/

那么，可变字体在实际中能怎么应用？众所周知中文的字体设计难度也比高几个量级，中文的可变字体目前发展得怎样了？粗浅地研究了下，本文就来探讨下这个问题。

动效设计

很多常见的字体其实能去到 7 种甚至 10 种字重，所以在静态的显示场景，基本都能满足好，所以静态展示并不是可变字体的价值。

可变字体优势在于，不同字重之间切换，是完全平滑过渡的，而不是从字重 light 直接跳到 regular，所以动态过渡效果就是一个自然的应用。

举两个 Material You 的例子：

熄屏显示时间的时候，因为黑底白字，用细的字重。而点亮屏幕时，出现了背景色，为了保证可读性，字重要加粗。背景壁纸固然可以使用渐入效果，但字体的过渡就有点麻烦了。这时可变字体就可以派上用场，当点击屏幕或者抬手亮屏，用可变字体实现最重要的时间数字，从细变粗的过程，效果很顺滑。

另一个是闹钟响起的应用，Google 给它设计一个强弱交替的动画，提醒你到点了。

当然了，在这两个例子里，都是数字作为最主要元素的场景，在其他地方要找出这样的应用还有点难。

品牌动态化

随着移动互联网普及，品牌几乎都会考虑社交媒体和 app 网站的线上营销，甚至就“原生”长在线上。那么利用前端技术实现品牌动效的情况也越来越多，在让品牌在众多竞争对手里脱颖而出，多一个记忆点。

而往往以字体为主 logo 的品牌，动态字体就是一种很好的结合。

比如全球最大的广告集团 WPP，他们的总部 Amsteldok 就用了可变字体的 VI，体现在各种物料，甚至可交互的前台接待屏幕里，而不仅是简单的一个循环播放的动画。

拓展阅读：https://mp.weixin.qq.com/s/-pQzLdDNWolQ3WhMS8oBJg

甚至在技术上，有开源项目通过贝塞尔曲线 + 插值计算，让可变字体做出伪 3D 效果。 https://github.com/andyclymer/Tilt-Typeface 意味着 3D 的品牌动态也是轻松的了。

中文可变字体

思源字体家族大家都知道，中文最有名的开源字体。设计师在下载的时候，一次 7 个字重、200M 的字体包的痛苦肯定遇到过。

而在去年 4 月，思源黑体发布了 2.0（思源黑体 vf），直接就是可变字体，字体包只有 30M，而今年 22 年 1 月，思源宋体也进行了 2.0 的更新。

下载地址：https://github.com/adobe-fonts/source-han-sans/tree/release/Variable

还有除了开头提到的“小米兰亭 vf”之外，其他真正的中文可变字体几乎就没有了。

思源黑体 vf 的出现是一个很重要的里程碑，中文开源字体趋势也是从思源带起来的，14 年思源作为首款开源、高质量、多字重的中文字体发布，到今天大家已经很多选择，也建立一定的字体商业模式。

字体设计工具在几年前已经引导大家往可变的方向设计，但毕竟如果没有实际应用和商业模式的探索，也不会得到更多支持。而这次思源支持可变，进一步促进大家改变字体设计的思路。