HTML怎么做可变字体weight_html可变字体font-weight调节【实例】-html教程-PHP中文网

font-weight: 372没反应是因为非可变字体不支持非整百值，浏览器会静默回退到最近整百值（如300或400）；必须使用含wght轴的可变字体，并通过@font-face或google fonts正确加载，且不能与font-variation-settings混用。

html怎么做可变字体weight_html可变字体font-weight调节【实例】

可变字体的 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。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

✅ 正确写法（二选一）：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 检测：

if ('fonts' in document && 'check' in document.fonts) {
  const hasWght = document.fonts.check('100 10px "Inter"');
  console.log(hasWght); // true 表示支持 100 字重
}