如何在CSS中实现与Figma设计一致的590字重效果？

CSS的font-weight仅支持100-900的整百数值或对应关键字（比如normal、bold），Figma里的510、590是它自身的精细字重划分，直接写进CSS不会生效。下面是几种实用的还原方法：

1. 匹配最接近的标准字重（优先推荐） #

SF Pro字体本身提供了标准字重的细分版本，和你需要的数值对应关系很明确：

• 510 → 用font-weight: 500（Medium）
• 590 → 用font-weight: 600（Semibold）

直接替换代码里的字重值即可，这是最稳妥的方案，因为用的是字体原生支持的字重，渲染效果最接近设计稿。

修改后的代码示例：

color: var(--white, #FFF);
font-family: "SF Pro";
font-size: 25px;
font-style: normal;
font-weight: 600; /* 替换原590 */
line-height: normal;

2. 搭配font-stretch微调视觉效果 #

如果觉得标准字重和设计稿的粗细/宽窄差异明显，可以用font-stretch属性辅助调整：

color: var(--white, #FFF);
font-family: "SF Pro";
font-size: 25px;
font-style: normal;
font-weight: 500;
font-stretch: 105%; /* 轻微拉宽，模拟510的视觉感受 */
line-height: normal;

注意：这个属性需要字体本身支持字宽变体，SF Pro是支持的，但只能作为辅助手段，不能完全替代非标准字重。

3. 使用SF Pro的细分字重字体文件 #

如果你能获取到SF Pro包含510、590这类精细字重的完整字体文件，可以直接在font-family里指定对应变体的名称：

color: var(--white, #FFF);
font-family: "SF Pro Text 590"; /* 需确保引入该变体字体文件 */
font-size: 25px;
font-style: normal;
line-height: normal;

这种方法的前提是项目中正确引入了对应字重的字体资源，否则浏览器会自动降级到默认字重。

4. 应急方案：用text-shadow模拟（不推荐） #

如果以上方法都无法实现，可以用细微的文字阴影模拟字重增加，但会导致文字边缘模糊，仅适合临时应急：

color: var(--white, #FFF);
font-family: "SF Pro";
font-size: 25px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor;

内容的提问来源于stack exchange，提问作者Sanan Ali