超实用！设计师必看的5个可变字体资源网站

大家好~ 这里是被大暴雨吵得没睡好的花生，当然这并不耽误我和大家继续聊设计。

自 2016 年 Adobe、Apple、Google、Microsoft 联合发布 OpenType 1.8 规范以来，可变字体一直是字体设计方面的热门话题。期间很多经典字体也相继推出了新的可变字体版本，比如思源黑体的 Variable OTF/TFF、Helvetica 的 Helvetica Now Variable，Figma 也在今年增加了可变字体功能，而可变字体在网页设计、动态海报、创意视频等方面的运用也越来越多，这些都显示出可变字体的发展潜力。

图片来源：https://www.monotype.com/fonts/helvetica-now-variable

什么是可变字体

可变字体是能包含整个字体系列的单一字体文件。我们都知道标准的字体文件一般包含 Thin、Light、Regular、SemiBold、Bold、Heavy6 个字重，每个字重以单独的字体文件形式存在，如果存在 Italic、Condensed、Extended 等变体，那相关的字体文件能多达二三十个。

而可变字体则能在一个字体文件中实现字体粗细、宽窄、高低、倾斜等多种样式的自由调整，且每个维度调整的步数最高有数百个，综合下来一个字体文件支持的字体样式高达百万，远超静态字体的样式数量。

可变字体之所能有如此惊人的样式数量，主要依靠对字体单个或者多个「轴」的设置。轴涉及重量、宽度、高度、倾斜、斜体和光学尺寸等多个方面，Figma 上有专门对可变字体「轴」概念进行讲解的网页，感兴趣的小伙伴可以进行深入了解。

「动态字体概念」 https://www.figma.com/typography/variable-fonts/#the-basics

可变字体的优势

相对静态字体，动态字体的优势包括：

1. 更小的文件体积

以经典西文黑体字体 Roboto 为例，一套标准的字体包包含 12 个字体文件，每个文件大小都在 170KB 左右，而其可变字体 Roboto Flex 则只有 1 个字体文件，大小 108KB，但是可支持的字体样式远超静态字体的 12 个。对网页设计来说，更少的字体文件数量和更小的文件体积能为网站带来更少的 HTTP 请求次数和更快的加载速度，给用户带来更流畅的使用体验。

更自由的设计空间

可变字体允许设计人员通过滑块对字体样式进行自由更改，这样一方面能让设计人员可以随时快速对字体样式进行调节，无需等待字体文件重新加载；另一方面超丰富的字体样式让设计师可以按照自己的想法对版式进行更精准细致的设计，保留更多选择和创意空间。

更好的响应式网页适配性

可变字体可以更好地适配响应式网页设计，字体形态能够随着设备显示比例的不同进行相应的改变，使页面在不同的设备、对比度和观看环境等条件下都能呈现最佳的视觉效果，为用户提供更加舒适的使用体验。

TYPO 实验室使用了可变字体作为其 2018 年会议视觉标识的一部分。

5 个可变字体资源网站

下面为大家推荐几个超好用可变字体网站，在上面你可以全面了解现在比较热门的可变字体、调节参数以预览不同的可变字体样式、下载相关资源、获取字体 CSS 代码，或上传自己电脑上的可变字体预览其效果。

1. v-fonts

网站链接：https://v-fonts.com/

v-fonts 是一个简便好用的可变字体公用资源搜寻网站，它包含目前大部分公开可用的可变字体，并提供字体基本信息、制作者、版权信息和下载渠道，用来找免费可商用的可变字体非常方便。

v-fonts 提供可变字体所有可用轴的设置界面，调整滑块就能实时预览字体的样式，还可以按字体特征标签、设计师和字体出版商等方式来快速筛选自己想要的可变字体。

2. Axis-Praxis 

网站链接：https://www.axis-praxis.org/specimens/__DEFAULT__

Axis-Praxis 是一个按时间顺序收集可变字体资源的网站，网站历史可以追溯到 1991 年，因此收集了很多珍贵的历史资料。在 Axis-Praxis 上我们可以在一个完整的版式内预览可变字体的不同样式，支持修改文字对齐方式和颜色，也支持上传本地可变字体文件进行预览。

点击在字体一栏右侧的圆形 i 字黑标，可以查看字体的详细信息，包括字体信息信息、版权、可用轴、命名范例等。

3. wakamaifondue

网站链接：https://wakamaifondue.com/

wakamaifondue 是由个人设计的可变字体预览工具网站。我们可以上传自己电脑上的字体，网站会自动识别然后显示出该可变字体的详细信息、布局特征和所有字符集等信息，并提供字体的 CSS 样式表格下载。

3. Font Playground 

网站链接：https://play.typedetail.com/ 

Font Playground 是一个专门用来预览优质可变字体的网站，网站提供可自由编辑字体的白板，在上面你可以同时预览多个字体的样式效果，非常适合用来观察字体细节并比较不同字体的差别。

网站左下角提供可变字体的版权信息和资源渠道，右侧是调节面板，如果点击白板上方的「code」右侧面板就会切换为 CSS 代码。

4. Google font 的可变字体

链接： https://fonts.google.com/variablefonts

Google font 有一个专门的可变字体版块，上面收集了 Google font 上所有的可变字体，点击对应的字体名称就可以转到详情页进行下载，字体都是免费可商用的。网站上还有对各种轴定义的解释，非常全面，对可变字体的各种轴缩写词还不明白的小伙伴一定记得看看。

5. variablefonts 

网站链接：https://variablefonts.io/ 

variablefonts 是一个非常全面的可变字体入门科普网站，在其中可以了解到可变字体如何运作，如何让 UI 设计更加轻松和美观，并提供相关可用资源。

以上就是今天为大家推荐的可变字体相关资源，希望对大家的设计工作有所帮助，喜欢的小伙伴记得点赞收藏哦~ 如果你还有关于文章或者设计内容的疑问，欢迎在评论区提出，我会第一时间回答。另外也欢迎大家加入优设的官方设计交流群，和喜欢设计的小伙伴一起交流（入群二维码见下方 Banner）~