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

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 .

具有可变权重的一个重要用途是 动画 .您实际上可以为字体的粗细设置动画，从而产生很酷的效果。退房 this CodePen 是一个很好的例子。

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

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