为何Inter字体font-weight仅切换普通/粗体？数值不生效问题

你的问题核心是可变字体配置不完整，导致浏览器无法正确解析500及以下的字重值，仅能识别600以上的粗体阈值。以下是具体修复步骤：

1. 确保引入完整的Inter可变字体文件 #

必须使用包含100-900完整字重范围的Inter可变字体文件（通常命名为InterVariable.woff2或Inter.ttf），而非拆分的静态字体文件（如Inter-Light.ttf、Inter-Regular.ttf这类单字重文件）。若使用静态字体，需为每个字重单独声明@font-face，但会增加加载体积，不如可变字体高效。

2. 修正CSS字体声明逻辑 #

当前代码仅通过@supports切换字体族，但缺少关键的@font-face声明来告知浏览器可变字体的字重范围。替换你的CSS为以下代码：

/* 声明Inter可变字体 */
@font-face {
  font-family: 'InterVariable';
  font-weight: 100 900; /* 明确支持的完整字重范围 */
  font-style: normal;
  font-display: swap; /* 优化字体加载体验 */
  src: url('path/to/InterVariable.woff2') format('woff2-variations');
}

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* 修复Chrome渲染问题 */
}

@supports (font-variation-settings: normal) {
  :root { 
    font-family: InterVariable, sans-serif;
    /* 可选：指定wght轴默认值，确保初始渲染一致性 */
    font-variation-settings: 'wght' 400;
  }
}

.btnText {
  color: blue;
  font-weight: 500; /* 现在会正确显示对应字重 */
}
.boldBtnText {
  color: blue;
  font-weight: 600;
}

3. 关键注意事项 #

• 将url('path/to/InterVariable.woff2')替换为你实际的字体文件路径。
• 现代浏览器（Chrome 62+、Firefox 62+、Safari 11.1+）均支持可变字体，@supports会自动为旧浏览器降级到静态字体或系统无衬线字体。
• 若坚持使用静态字体，需为每个字重单独声明@font-face，示例：

  @font-face {
    font-family: 'Inter';
    font-weight: 100;
    src: url('Inter-Thin.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-weight: 200;
    src: url('Inter-ExtraLight.woff2') format('woff2');
  }
  /* 依次声明300、400、500、600、700、800、900的@font-face */
  

4. 验证修复方法 #

使用浏览器开发者工具检查：

• 字体文件是否成功加载（在Network面板筛选font类型）。
• 目标元素的computed样式中，font-family是否正确应用InterVariable，font-weight是否匹配设置值。

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