可变字体和常规字体有什么区别 [英] 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屋!