React中Inter字体font-weight属性异常问题求助

问题核心原因 #

1. 浏览器自动合成字体权重：当指定的字体权重未被正确加载时，浏览器会基于现有字体自动合成粗体/细体。你设置600时文字变粗，实际是浏览器用已加载的400权重Inter字体合成了粗体；而300、500权重无变化，是因为浏览器 fallback 到系统默认字体的对应权重，和Inter 400的视觉差异不明显，导致你误以为样式未生效。
2. 字体加载未完全生效：虽然index.html中引入了300、400、500权重的Inter，但可能存在缓存、网络加载顺序或字体优先级问题，导致浏览器实际未加载到300和500的字体文件。

具体解决方案 #

1. 修正字体引入，确保权重正确加载

修改index.html中的字体链接，添加font-display: swap优化加载体验，同时按需加入需要的权重（比如600）：

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

2. 禁用浏览器字体合成

在CSS中给目标按钮添加font-synthesis: none，强制浏览器仅使用已加载的字体权重，避免自动合成：

.add-note {
  font-size: 1.2rem;
  font-weight: 500; /* 替换为你需要的权重 */
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-synthesis: none; /* 禁用自动合成 */
  /* 其他原有样式保持不变 */
}

3. 手动声明@font-face（可选，更可靠）

如果Google Fonts链接加载仍有问题，可手动用@font-face声明每个权重的字体文件，确保对应关系准确：

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
}

注：上述URL需替换为对应权重的真实文件地址，可从Google Fonts页面获取

4. 清除浏览器缓存

浏览器缓存旧字体文件可能导致新权重不生效，可通过清除缓存或在字体链接后添加版本参数（如?v=2）强制刷新。

验证方法 #

设置font-weight: 300并添加font-synthesis: none后，若文字变细则说明300权重字体已加载成功；若仍无变化，检查字体链接是否正确，或通过浏览器开发者工具「网络」面板查看字体文件是否成功加载。

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