讯享网

 <p id="34P81U6L">几年前，可变字体进入设计领域时，引发了大量的讨论和兴奋之情。但也让人感到挫败，因为这是一项新的技术，玩起来挺有趣，却还无法投入使用。可变字体在所有浏览器、操作系统和软件中的支持仍未普及，但正在逐步实现。因此，非常值得了解它们，并考虑它们是否适合您的项目（如果不适合，请查看我们的免费字体列表）。</p><p id="34P81U6M">从设计的角度来看，可变字体的主要优点在于其灵活性。我们习惯围绕具有离散宽度和权重的字体来做设计，这可能会存在一定限制。要是不合适，或者某种权重看起来太粗，而下一个选项又太轻，您唯一能做的选择就是更改您的设计。可变字体能够通过让字体像其他所有事物一样可调整，从而解决这些问题。摆脱了这些限制，设计师可以比以往任何时候都更具创造力。</p><p id="34P81U6N">排版周即将结束，请务必查看我们所有精彩的排版内容。</p><p><h5>什么是可变字体？</h5></p><p id="34P81U6O">可变字体不是有许多不同的宽度和权重可供选择，而是可以在连续的轴上进行调整。理解这一点最简单的方法就是前往V-Fonts，这是一个公开可用的可变字体库，并进行一番尝试。许多字体只有宽度和权重的滑块，但有些字体有许多其他属性的轴。例如，Roboto Flex 有 13 个不同属性的轴。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Flmr%2F2024%2F1031%2F4d0a604b99e26fc58405e6bf7f53db83.jpeg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34P81U6P">在此基础上，可变字体能够从一种样式顺滑地过渡到另一种样式，这意味着您可以使用它们来创建动画。这可能是些细微之处，比如当您把鼠标悬停在文本上时，文本会平滑地变粗。或者它可能更具震撼效果，如下例所示，当您把鼠标悬停在字体上时，可变字体 Compressa 会被拉伸和压缩。用可变字体创建动画，比您能用来达成相同效果的替代方法要简单得多，也更轻巧。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Flmr%2F2024%2F1031%2F52bdd20a6f48d7f91ff9fae283d49142.jpeg&thumbnail=660x&quality=80&type=jpg"/><br/> <h5>可变字体与传统字体系列有何不同？</h5><br/></p><p id="34P81U6Q">正如您可能预料的那样，可变字体的制作方式跟传统字体大不相同。可变字体的一个主要优点在于它们存在于单个字体文件中。对于传统字体系列，每种宽度和权重都以单独文件的形式存在，而且网站得为页面上的每个变体加载该文件。仅一个包含每个变体的文件就能让网页更轻巧，这能够带来性能优势。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Flmr%2F2024%2F1031%2F8bf023883c0c2a5ec094138a9e6e0b7c.jpeg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34P81U6R">另一个重要的区别在于，可变字体并非受到浏览器、操作系统和软件包的普遍支持。大多数浏览器和操作系统在很大程度上确实支持它们，但也有一些注意事项和复杂性。在决定可变字体的好处值不值得您费心思时，您得考虑这些因素。</p><p><h5>我何时会使用可变字体？</h5></p><p id="34P81U6S">就设计而言，使用可变字体的好处是显而易见的。它们具有灵活性，能开启各种各样的创意可能，而且其动画功能为您的网站提供了添加动态、有趣效果的途径，还不会让网站变得沉重。</p><p id="34P81U6T">人们往往容易急于使用可变字体，不过有一些重要因素得考虑。首先，前往 CanIUse 以及 这个关于 V 字体的页面 来了解支持方面的限制。您是否选择在您的网站上使用可变字体，在很大程度上取决于这是个什么类型的网站以及您的用户是哪些人。对于某些网站，如果不是每个用户都能正确显示，可能也不是世界末日。对于其他网站，您可能需要进行额外的测试、设置备用方案以及其他工作，以确保在每种情况下都能正常工作，这可能会抵消使用可变字体的好处。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Flmr%2F2024%2F1031%2Fa1ae7c4a977d7397bcb389bb28.jpeg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34P81U6U">另一个可能阻碍您的因素在于，标准字体要比可变字体多得多。因此，您可能无法找到您想要用作可变字体的字体样式。质量也是一个问题：许多可变字体未达到最高标准。</p><p id="34P81U6V">另一方面，如果您正在制作将在纸上打印或以静态格式发布的内容，兼容性问题就迎刃而解了。InDesign、Photoshop 和 Illustrator 都支持可变字体，因此没有什么能阻止您使用它们。浏览 Fonts in Use 来获取一些灵感。</p><p align="center"><h5>可变字体示例</h5> <img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Flmr%2F2024%2F1031%2Fe9234c9bd06b97256bd365e1.jpeg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34P81U70">在 V-Fonts 网站上，您可以找到 Heliuum VAR 字体，它真正展示了可变字体的强大功能。它是单个字体中的整个排版系统。有七组不同高度和位置的大写字母，让您仅用单个字体文件就能充分发挥创意。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Flmr%2F2024%2F1031%2F2e81423e4f45afd0518d01728f98659a.jpeg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34P81U71">Pimpit，同样在 V-Fonts 上，是一种古怪的可变字体的例子，当您通过“Pump”轴来使字母的部分膨胀时，它的外观会发生巨大变化。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Flmr%2F2024%2F1031%2F7f39244d3df3a2b50d25bc6dbb6d70b4.jpeg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34P81U72">然后还有 WHOA，这是一种可变字体，其中每个字母的绘制都如同可拉伸的螺旋弹簧。在下面的 CodePen 中，Mandy Michael 对其进行了动画处理，以便在您移动鼠标时字母会拉伸。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Flmr%2F2024%2F1031%2F26facc63737cf18e2aba7a498.jpeg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2Flmr%2F2024%2F1031%2Fb52b5e6dd96dee59911add989.jpeg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34P81U73">希望我已经阐明了尽早尝试可变字体的缘由。</p><p id="34P81U74">我们已经在其使用方式中见识到了一些令人惊叹的创意，毫无疑问，在未来几年我们会看到更多。</p><p id="34P81U75">可变字体在字体的未来发展中占据着稳固的地位，但瞧瞧我们的专家对于排版的未来还做出了哪些预测。</p><p id="34P81U76">然后您可以查看我们出色的排版词汇表，来弄清楚您需要厘清的其他任何内容。</p>