可变字体和常规字体有什么区别 [英] What is the difference between Variable fonts and regular fonts

问题描述

我正在阅读有关可变字体的信息，但我不明白.

I was reading about variable fonts and I don't get the concept.

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

There are 5 registered axes wght, wdth, ital, slnt, opsz. Font weight already pre-existed and we use it daily in our css.

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

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

Also, if I put a range of font-weight: 100 500 and then use font-weight: 600 in <p> elements, I don't see any difference.

即使我将重量限制为500，重量600仍可继续工作.

The weight 600 continues to work even tho I have limited it to 500.

@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;
}

推荐答案

可变字体和常规字体之间的主要区别是可变字体是单个文件.那个文件可以承受一切重担.但是，使用常规字体时，每个粗细都有其自己的文件.

The main difference between variable fonts and regular fonts is that variable fonts are a single file. That one file holds every weight. With regular fonts, however, every weight has its own file.

此外，可以将可变字体设置为阳光下的任何重量.严重地;尽管常规字体的权重仅限于轻"，常规"和粗体"，但可变字体可以设置为任意权重，如 375 和 458 ，所有这些最多 1000 .

Also, variable fonts can be set to any weight under the sun. Seriously; while regular fonts are limited to weights like "light", "regular", and "bold", variable fonts can be set to arbitrary weights like 375 and 458, all the way up to 1000.

具有可变权重的一个大用途是动画.实际上，您可以为字体的粗细设置动画，从而获得不错的效果.查看此 CodePen就是一个很好的例子.

A big use for having variable weight is animation. You can actually animate the font's weight, making for cool effects. Check out this CodePen for a great example.

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

Finally, variable fonts can have other variables besides weight. Check out https://v-fonts.com and you'll see fonts with variable width, slant, and more.

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

For more information, I'd recommend reading this article from MDN.

这篇关于可变字体和常规字体有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！