HTML中使用CSS的font-weight属性可以控制文字的粗细程度。该属性接受多种值，包括关键字和数值，用于定义字体的粗细。1. 关键字值normal：默认值，表示正常粗细。bold：加粗。bolder：比父元素更粗。lighter：比父元素更细。示例：p { font-weight: bold; /* 文字加粗 */ }2. 数值值100 到 900 之间的整数，表示不同的粗细级别。数值

HTML中CSS的font-weight属性看似简单，实则暗藏诸多实践陷阱：关键字如bold虽易用却受限于字体固有字重（常仅支持400/700），而数值写法（100–900）才能精准表达粗细意图、支持平滑升级（如800/900），前提是字体文件必须真实包含对应字重，否则浏览器会静默降级；更需警惕引号误写、非整百数无效、bolder不可控、a标签被默认样式覆盖，以及Windows下因缺失字重触发“fake bold”导致文字发虚等典型问题——真正可靠的加粗，始于对字体加载、元数据匹配与运行时验证的全程掌控。

font-weight 数值写法比 bold 更可靠

直接写 font-weight: bold 看似简单，但实际效果受限于字体本身是否提供真正的 bold 字重。很多系统字体（如 Windows 的微软雅黑、macOS 的 -apple-system）只内置 400 和 700 两级，bold 就是 700，再没更粗的选项。而用数值能明确表达意图，也方便后续扩展——比如想比 bold 还粗一点，font-weight: 800 或 900 就是唯一出路。

常见误区：

• font-weight: "bold" 加了引号 → 语法错误，浏览器忽略该声明
• font-weight: bolder 嵌套多层后不可控 → 它不固定，依赖父元素当前值，父是 400 时它变 700，父是 700 时它可能卡在 700 不动（因字体无 800）
• font-weight: 650 → 非整百数，所有浏览器都当无效值处理，静默 fallback 到 600 或 700

字体支持决定 font-weight 实际效果

font-weight: 900 写得再对，如果当前字体文件没打包 900 字重，浏览器就自动降级到最近可用值（比如 700），且不报错、不提示。你在 DevTools 的 Computed 面板里看到的解析值才是真实生效的字重。

验证和应对方式：

• 用 Google Fonts 时，必须显式加载对应字重链接，例如 https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900，漏掉 900 就用不上
• 自定义字体用 @font-face 时，font-weight 声明必须与实际 .woff2 文件的元数据一致，否则浏览器无法匹配
• 可调用 document.fonts.check('900 Roboto') 在运行时判断是否加载成功（注意：需等字体加载完成后再查）

font-weight 在 a 标签或内联元素上容易失效

超链接 默认没有加粗，但设了 font-weight: 700 却没反应？大概率是被用户代理样式或更高优先级规则覆盖了。Chrome/Firefox 对 的默认 font-weight 是 400，但某些 UI 框架（如 Bootstrap）会全局重置为 normal，导致你的声明被压制。