Inter字体在CSS与Figma中中间字重显示差异及CSS使用中间字重的方法咨询

嘿，这个问题我碰到过好多次了，咱们先把背后的原因说清楚，再给你解决办法～

首先，Figma里的Inter之所以能完美显示450这种中间字重，是因为它用的是Inter可变字体（Variable Fonts）——这种字体格式支持在指定范围内平滑调整字重、字宽等属性，所以450、550这类非整数档的字重都能精准渲染出对应的视觉效果。

但你在浏览器里遇到的问题，大概率是因为你引入的Inter是静态字重版本：也就是只打包了400、500、600这些固定档的字体文件，浏览器找不到450对应的字重文件时，会自动 fallback 到最接近的可用字重（这里就是500），所以看起来和500完全一样。

那怎么在CSS里用上450、550这类中间字重呢？看这几步：

• 引入Inter的可变字体版本
  不管是本地引入还是用CDN，都要确保加载的是支持可变字重的字体文件。比如用本地字体的话，你的@font-face规则要这么写：

  @font-face {
    font-family: 'Inter';
    src: url('Inter-VariableFont_slnt,wght.ttf') format('truetype');
    font-weight: 100 900; /* 明确指定支持的字重范围，从100到900 */
    font-style: normal;
  }
  

  如果用Google Fonts的话，要选支持可变范围的引用链接，比如：

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap">
  

  这里的100..900就是告诉浏览器加载可变版本，支持这个区间内的任意字重数值。

• 验证字体加载状态
  你可以在Chrome开发者工具的「Application」面板里，找到「Fonts」选项，查看加载的Inter字体详情——如果是可变字体，会明确标注“Variable Font”，同时显示支持的字重范围。要是这里显示的是多个静态字重文件（比如Inter-Regular、Inter-Medium），那说明你加载的还是静态版，得调整引用方式。

• 确认浏览器兼容性
  好在现在主流浏览器（Chrome、Firefox、Safari 15+）都已经支持可变字体了，除非你需要兼容非常老旧的浏览器（比如IE11），否则不用纠结兼容性问题。

按照上面的步骤调整后，再设置font-weight: 450，浏览器就能渲染出和Figma里一致的中间字重效果啦～

内容来源于stack exchange