可变字体和普通字体有什么区别

Question

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

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

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

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

即使我将其限制为 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。

可变权重的一个重要用途是动画。实际上，您可以对字体的粗细进行动画处理，从而产生很酷的效果。看看这个CodePen 的一个很好的例子。

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

有关更多信息，我建议阅读MDN 上的这篇文章。