我正在阅读有关可变字体的内容,但我不明白这个概念。
有 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;
}
最佳答案
可变字体和普通字体的主要区别在于可变字体是单个文件 .那个文件可以承受所有重量。但是,对于常规字体,每个粗细都有自己的文件。
此外,可变字体可以设置为 阳光下的任何重量 .严重地;常规字体仅限于“light”、“regular”和“bold”等粗细,而可变字体可以设置为任意粗细,如 375
和 458
,一直到1000
.
具有可变权重的一个重要用途是 动画 .您实际上可以为字体的粗细设置动画,从而产生很酷的效果。退房 this CodePen 是一个很好的例子。
最后,可变字体除了重量之外还可以有其他变量。退房 https://v-fonts.com你会看到宽度可变、倾斜等的字体。
有关更多信息,我建议阅读 this来自 MDN 的文章。
关于css - 可变字体和普通字体有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60806313/