css 字体设置的研究 – font-variation-settings

323次阅读
没有评论

font-variation-settings属性是CSS中用来控制可变字体特性的低级属性,通过指定要改变的特性的四个字母的轴名称和值12。可变字体是一种可以根据不同的参数调整字形的字体,比如粗细、宽度、倾斜等1

这个属性的值可以是normal,表示使用默认设置,也可以是一个或多个由字符串和数字组成的对,表示要设置的轴名称和值。字符串必须是四个ASCII字符,数字可以是小数或负数,取决于字体支持的范围13

这个属性的单位是无单位数(number),表示在轴上取值的比例1


font-variation-settings属性是CSS中用来控制可变字体特性的低级属性,通过指定要改变的特性的四个字母的轴名称和值¹³。可变字体是一种可以根据不同的参数调整字形的字体,比如粗细、宽度、倾斜等¹。

这个属性的值可以是normal,表示使用默认设置,也可以是一个或多个由字符串和数字组成的对,表示要设置的轴名称和值。字符串必须是四个ASCII字符,数字可以是小数或负数,取决于字体支持的范围¹²。

这个属性的单位是无单位数(number),表示在轴上取值的比例¹。

源: 与必应的对话, 2023/3/20(1) font-variation-settings – CSS: Cascading Style Sheets | MDN – Mozilla. https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings 访问时间 2023/3/20.
(2) font-variation-settings – CSS:层叠样式表 | MDN. https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variation-settings 访问时间 2023/3/20.
(3) font-variation-settings – CSS: Cascading Style Sheets | MDN – Mozilla. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variation-settings 访问时间 2023/3/20.
(4) font-variation-settings – CSS: カスケーディングスタイルシート | MDN. https://developer.mozilla.org/ja/docs/Web/CSS/font-variation-settings 访问时间 2023/3/20.


好的,这里是一个设置的例子,使用了可变字体Amstelvar,并且改变了宽度(wdth)和粗细(wght)的轴值。你可以看到文字的形状随着轴值的变化而变化。

好的,这里是一个设置的例子:

/* 使用默认设置 */
font-variation-settings: normal;

/* 设置可变字体轴名称和值 */
font-variation-settings: "wght" 700, "wdth" 80;

这个例子中,wght表示字重,wdth表示字宽。这个属性会让字体变得更粗更窄。

正文完
 0
评论(没有评论)