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

fae0ux8s 于 2023-08-01 发布在其他

关注(0)|答案(1)|浏览(165)

我正在做一个项目，设计UI的设计师使用了CSS中没有的510和590字体权重。有没有办法在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;

字符串

Html

来源：https://stackoverflow.com/questions/76769302/how-to-implement-590-font-wight-in-css-same-as-figma-design

1条答案

按热度按时间

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

个字符

赞(0）回复(0）举报 2023-08-01

我来回答

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

1条答案

相关问题

热门标签

最新问答