font-weight: 372没反应是因为非可变字体不支持非整百值，浏览器会静默回退到最近整百值（如300或400）；必须使用含wght轴的可变字体，并通过@font-face或Google Fonts正确加载，且不能与font-variation-settings混用。
可变字体的 font-weight 不是“设了就变”，而是必须同时满足三件事：字体文件含 wght 轴、CSS 显式启用、不被 font-variation-settings 覆盖。
为什么 font-weight: 372 没反应
浏览器看到非整百数值（如 372）时，不会报错，但会直接忽略——除非你用的是真正的可变字体，且已通过 @font-face 或 Google Fonts 正确加载。普通 Web 字体（如 Roboto、Noto Sans）哪怕写了 font-weight: 372，也会静默 fallback 到最近的整百值（比如 300 或 400）。
- 检查是否用了可变字体：访问 Google Fonts 可变字体专区，只选标有 “Variable” 的字体（如
Inter、Source Sans Pro VF） - 确认加载链接含
opsz或wght参数：例如https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..48,100..900 - 在 DevTools 的 Elements 面板中，展开该元素的 Computed 样式，看
font-weight解析值是否真为372；若显示400，说明未生效
font-variation-settings 和 font-weight 能不能一起用
不能。只要用了 font-variation-settings，它就会完全接管字重控制，font-weight 值会被忽略。这是规范行为，不是 bug。
- ✅ 正确写法（二选一）：
font-weight: 372;或font-variation-settings: 'wght' 372; - ❌ 错误写法：
font-weight: 372; font-variation-settings: 'wght' 372;—— 后者覆盖前者 - ⚠️ 注意：iOS Safari 在 13.4 之前不支持
wght轴，IE 完全不支持；可用@supports (font-variation-settings: normal)做降级
如何验证字体是否真支持 wght 轴
光看字体名没用，得查实际文件能力。最可靠方式是用 JS 检测：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
if ('fonts' in document && 'check' in document.fonts) {
const hasWght = document.fonts.check('100 10px "Inter"');
console.log(hasWght); // true 表示支持 100 字重
}
- 若返回
false，说明该字体实例未加载对应字重，或字体本身不含wght轴 - 用
document.fonts.load()预加载关键字重可减少 FOIT（Flash of Invisible Text） - 注意：
document.fonts.check()检测的是“已加载字体”，不是“已声明字体”；需确保@font-face或 link 已触发下载
Windows 下文字发虚？别乱加 text-shadow
可变字体在 Windows + Chrome 中常因子像素渲染策略导致 font-weight: 527 这类值边缘模糊——这不是 CSS 写错了，是浏览器对非整百值做了合成加粗（fake bold）。
- 优先方案：改用字体厂商提供的原生字重档（如 Inter 的
wght@300是独立 .woff2 文件，不是插值生成） - 禁用合成：加
-webkit-font-smoothing: antialiased;仅对 WebKit 有效，但会整体降低清晰度，慎用 - 绝对不要叠加
text-shadow: 0 0 1px black来“补粗”，这会让模糊更明显，且破坏可访问性
真正可控的字重调节，不在数值精度，而在字体文件本身是否提供连续轴；所有“看起来生效”的非整百值，背后都是字体文件能力的映射，不是浏览器的魔法。
