html 如何在CSS中实现590字体粗细与Figma设计相同

fae0ux8s  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(83)

我正在做一个项目,设计UI的设计师使用了CSS中没有的510590字体权重。有没有办法在CSS中实现相同的字体粗细?我想有和figma一样的设计。
下面是figma生成的代码,但是font-weight在真实的的CSS中不起作用。

color: var(--white, #FFF);
font-family: SF Pro;
font-size: 25px;
font-style: normal;
font-weight: 590;
line-height: normal;

字符串

nwo49xxi

nwo49xxi1#

感谢ATP的评论。我知道这是如何在CSS中工作的。
你首先需要确保你有字体的变化,如300,400,500,600等。没有变化,它将无法工作。
然后需要添加font-variation-settings: 'wght' 590;而不是font-weight:590
这里有一个简单的例子

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900');

.font-500 {
  font-family: 'Inter';
  font-variation-settings: 'wght' 500;
}
.font-590 {
  font-family: 'Inter';
  font-variation-settings: 'wght' 590;
}

个字符

相关问题