什么是 CSS 中的可变字体，以及如何使用它们

Posted on by

可变字体于 2018 年首次实验性地引入 Chrome 和其他浏览器。如今，它对该功能的支持覆盖了 90% 以上的网络用户。不仅如此，可变字体也很棒。让我们看看它们是什么，以及如何使用它们。

什么是可变字体？#

简而言之，可变字体是真实类型字体规范的演变，这意味着所有可能的字体粗细和样式都在一个文件中可用。

这是我们使用的字体示例，Inter，带有一个滑块来调整其重量：

这是可变字体！在下面改变我的体重：

好处#

可变字体有什么好处？那么有很多：

灵活性

通常，当您使用普通字体时，您会被限制在几个固定的粗细上。使用可变字体，这不再是问题 – 您在一个文件中拥有所有重量，并且它们都旨在看起来正确。这使得设计更容易

更少的 HTTP 请求

前端设计师最头疼的问题之一是决定在网页上包含多少权重。字体可能是相当大的文件，每个 HTTP 请求都会降低您的网站速度。使用可变字体，您只需下载一个文件，从而减少 HTTP 负载。话虽如此，该文件确实往往更大，但是当您考虑否则会使用许多不同的字体文件时，它大致平衡了。

除了减少 HTTP 请求的好处外，这是一个净加分项！

它们不仅仅是为了重量

可变字体不仅涵盖权重。你可以调整很多东西：

  • How italic a font is
  • How big its serif sizes are
  • How wide the letters are
  • The ‘mono’ the font is
  • How curved the lines are
  • 字体的斜体程度
  • 它的衬线尺寸有多大
  • 字母有多宽
  • 字体的“单声道”是
  • 线条有多弯曲

你得到交易。字体设计师可以给你更多的选择，你可以选择你想要的。他们有两个版本的字母 g 吗？您可以在它们之间选择一些东西。作为设计师和开发人员，它为您提供了巨大的灵活性。

它是如何工作的？#

首先，为自己找到一个可变字体。如前所述，Iter 就是一个例子——Google Fonts 将链接到特定的可变字体类型。您需要确保您拥有可变版本。

根据您使用的可变字体，您的主要工具将是 CSS 属性，font-variation-settings. 首先，包括您的可变字体。一个简单的实现可能如下所示：

@font-face {
    font-family: 'Inter';
    font-display: swap;
    src: url("/fonts/inter.ttf") format('truetype');
}

不同的字体属性

由于我们使用可变字体，我们不能只使用font-weight或类似的属性。相反，我们需要通过font-variation-settings. 设置权重的示例如下所示：

.fontExample {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-variation-settings: 'wght' 400;
}

所以我们使用关键字wght来设置字体的粗细font-variation-settings。但我们不受限制 – 使用可变字体，我们可以将粗细设置为任何值，例如 432。

通过font-variation-settings，我们可以更改以下核心属性，如果变量字体包含它们的变体：

  • ‘wght’ – 字体的粗细。
  • ‘wdth’ – 字母的宽度。
  • ‘slnt’ – 字母的角度
  • ‘ital’ – 字母的斜体程度。
  • ‘opsz’ – 字体在屏幕上的调整方式（光学尺寸）。

如果您想使用多个变体设置，只需用逗号分隔它们：

font-variation-settings: 'wght' 400, 'slnt' 20;

填充物#

在您的浏览器不支持可变字体的情况下，您可以使用 font-family 属性回退到另一种字体类型。确保将常规 CSS 属性与字体一起使用，例如“font-weight”，以便回退适用于不支持可变字体的浏览器：

.fontExample {
    font-family: Inter, Helvetica, sans-serif;
    font-weight: 400;
    font-variation-settings: 'wght' 400;
}

其他有用的属性#

还有许多其他属性已加入规范，它们具有可变（请原谅双关语）字体支持级别。事实上，可变字体可以有任意数量的自定义属性。请注意，这些区分大小写，并由字体创建者定义。

大多数可变字体都会附带文档，告诉您可以使用哪些字体，因此请查看这些以了解您可以更改字体的哪些内容！

推荐阅读：