可变字体和常规字体有什么区别

Question

我正在阅读有关可变字体的信息，但我不明白这个概念。

有 5 个注册轴 wght、wdth、ital、slnt、opsz。字体粗细已经预先存在，我们每天都在 CSS 中使用它。

那么这里可变字体和常规字体有什么区别呢？

另外，如果我将font-weight: 100 500 的范围放在<p> 元素中，然后使用font-weight: 600，我看不出有任何区别。

即使我将其限制为 500，重量 600 仍然有效。

@font-face {
  font-family: "sketch_3dregular";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2 supports variations"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2-variations");
  font-weight: 100 500;
  font-stretch: 85% 100%;
}

html {
  font-size: 10px;
  margin: 0;
  font-family: "sketch_3dregular";
}

p {
  font-size: 1.4rem;
  line-height: 1.6;
  word-spacing: 0.6rem;
  font-weight: 600;
}

Answer 1

可变字体和常规字体的主要区别在于可变字体是一个单个文件。那个文件可以承受所有重量。但是，对于常规字体，每个粗细都有自己的文件。

此外，可变字体可以设置为任何重量。严重地;常规字体限制为“light”、“regular”和“bold”等粗细，而可变字体可以设置为任意粗细，如375 和458，一直到1000。

可变权重的一大用途是动画。您实际上可以为字体的粗细设置动画，从而制作出很酷的效果。看看thisCodePen 就是一个很好的例子。

最后，可变字体除了权重之外还可以有其他变量。查看https://v-fonts.com，您会看到具有可变宽度、倾斜度等的字体。

有关更多信息，我建议阅读来自 MDN 的 this 文章。

Answer 2

字体具有字形轮廓数据。如果您有“常规”和“粗体”的常规字体，那么它们中的每一个都有单独的轮廓。但是在可变字体中，有一组轮廓加上额外的“增量”数据，字体设计者在其中描述了轮廓如何在一个或多个轴的设计变化空间中变化。增量数据提供了沿轴的最大变化，您最终会得到从原始轮廓到最大修改的连续统一体，并且可以选择沿该连续统一体的任何变化。

因此，可变字体可以被描述为单个文件中的整个字体系列，但它甚至不止于此，因为该系列现在包括沿支持的任何轴的每一个小的增量更改 --- 所以不仅仅是一个有“轻”、“常规”和“大胆”的家庭，但也有介于两者之间的一系列可能性。

动画被认为是一种可能的用途。但是对于 Web 开发人员来说更重要的是可以访问更大的印刷调色板和更小/更少的文件来下载。

我推荐 Mandy Michael 最近的演讲，Very Responsive Typography with Variable Fonts，以及她写的关于性能的文章，The performance benefits of Variable Fonts。

如果您想了解可变字体格式如何工作的技术细节，请参阅 OpenType 规范中的概述章节，here。

MDN guide 也很棒。

至于您关于声明范围font-weight: 100 500 然后使用font-weight: 600 但没有看到任何不同的具体问题，声明范围之外的任何值都将无效，UA 将使用最接近的有效值。所以在你的例子中，font-weight: 600 应该给出与font-weight: 500 相同的结果。