字体图标库（字体图标的用法）



几年前，可变字体进入设计领域时，引发了大量的讨论和兴奋之情。但也让人感到挫败，因为这是一项新的技术，玩起来挺有趣，却还无法投入使用。可变字体在所有浏览器、操作系统和软件中的支持仍未普及，但正在逐步实现。因此，非常值得了解它们，并考虑它们是否适合您的项目（如果不适合，请查看我们的免费字体列表）。

从设计的角度来看，可变字体的主要优点在于其灵活性。我们习惯围绕具有离散宽度和权重的字体来做设计，这可能会存在一定限制。要是不合适，或者某种权重看起来太粗，而下一个选项又太轻，您唯一能做的选择就是更改您的设计。可变字体能够通过让字体像其他所有事物一样可调整，从而解决这些问题。摆脱了这些限制，设计师可以比以往任何时候都更具创造力。

排版周即将结束，请务必查看我们所有精彩的排版内容。

什么是可变字体？

可变字体不是有许多不同的宽度和权重可供选择，而是可以在连续的轴上进行调整。理解这一点最简单的方法就是前往V-Fonts，这是一个公开可用的可变字体库，并进行一番尝试。许多字体只有宽度和权重的滑块，但有些字体有许多其他属性的轴。例如，Roboto Flex 有 13 个不同属性的轴。

在此基础上，可变字体能够从一种样式顺滑地过渡到另一种样式，这意味着您可以使用它们来创建动画。这可能是些细微之处，比如当您把鼠标悬停在文本上时，文本会平滑地变粗。或者它可能更具震撼效果，如下例所示，当您把鼠标悬停在字体上时，可变字体 Compressa 会被拉伸和压缩。用可变字体创建动画，比您能用来达成相同效果的替代方法要简单得多，也更轻巧。

可变字体与传统字体系列有何不同？

正如您可能预料的那样，可变字体的制作方式跟传统字体大不相同。可变字体的一个主要优点在于它们存在于单个字体文件中。对于传统字体系列，每种宽度和权重都以单独文件的形式存在，而且网站得为页面上的每个变体加载该文件。仅一个包含每个变体的文件就能让网页更轻巧，这能够带来性能优势。

另一个重要的区别在于，可变字体并非受到浏览器、操作系统和软件包的普遍支持。大多数浏览器和操作系统在很大程度上确实支持它们，但也有一些注意事项和复杂性。在决定可变字体的好处值不值得您费心思时，您得考虑这些因素。

我何时会使用可变字体？

就设计而言，使用可变字体的好处是显而易见的。它们具有灵活性，能开启各种各样的创意可能，而且其动画功能为您的网站提供了添加动态、有趣效果的途径，还不会让网站变得沉重。

人们往往容易急于使用可变字体，不过有一些重要因素得考虑。首先，前往 CanIUse 以及 这个关于 V 字体的页面 来了解支持方面的限制。您是否选择在您的网站上使用可变字体，在很大程度上取决于这是个什么类型的网站以及您的用户是哪些人。对于某些网站，如果不是每个用户都能正确显示，可能也不是世界末日。对于其他网站，您可能需要进行额外的测试、设置备用方案以及其他工作，以确保在每种情况下都能正常工作，这可能会抵消使用可变字体的好处。

另一个可能阻碍您的因素在于，标准字体要比可变字体多得多。因此，您可能无法找到您想要用作可变字体的字体样式。质量也是一个问题：许多可变字体未达到最高标准。

另一方面，如果您正在制作将在纸上打印或以静态格式发布的内容，兼容性问题就迎刃而解了。InDesign、Photoshop 和 Illustrator 都支持可变字体，因此没有什么能阻止您使用它们。浏览 Fonts in Use 来获取一些灵感。

可变字体示例

在 V-Fonts 网站上，您可以找到 Heliuum VAR 字体，它真正展示了可变字体的强大功能。它是单个字体中的整个排版系统。有七组不同高度和位置的大写字母，让您仅用单个字体文件就能充分发挥创意。

Pimpit，同样在 V-Fonts 上，是一种古怪的可变字体的例子，当您通过“Pump”轴来使字母的部分膨胀时，它的外观会发生巨大变化。

然后还有 WHOA，这是一种可变字体，其中每个字母的绘制都如同可拉伸的螺旋弹簧。在下面的 CodePen 中，Mandy Michael 对其进行了动画处理，以便在您移动鼠标时字母会拉伸。

希望我已经阐明了尽早尝试可变字体的缘由。

我们已经在其使用方式中见识到了一些令人惊叹的创意，毫无疑问，在未来几年我们会看到更多。

可变字体在字体的未来发展中占据着稳固的地位，但瞧瞧我们的专家对于排版的未来还做出了哪些预测。

然后您可以查看我们出色的排版词汇表，来弄清楚您需要厘清的其他任何内容。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/47491.html