超实用！设计师必看的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）~