HTML字体加粗技巧分享

HTML中设置字体粗细远非简单填写数字即可生效，font-weight实际仅支持normal、bold、lighter、bolder及100–900中的整百数（如400/700），且能否真正加粗完全取决于所用字体是否真实提供对应字重——多数系统字体仅支持400（常规）和700（粗体）两档，填入550、650等非标准值往往被浏览器就近取整后降级为400，导致样式“看似写了却无效”；最稳妥的做法是统一使用CSS变量管理语义化字重（如--fw-regular: 400; --fw-bold: 700），并严格配合已声明字重的@font-face或Google Fonts显式加载（如Roboto:wght@400;700），同时通过开发者工具的Fonts面板验证实际加载的字体文件及其weight值——毕竟再精准的CSS也敌不过缺失的字体资源，字体粗细的本质，是字体文件能力与CSS声明的双重匹配。

font-weight 能设哪些值，哪些真正有用

直接说结论：font-weight 不是“越数字越大就越粗”，浏览器只认有限几个关键字和部分数字值，瞎填 650 或 888 基本等于白写。

主流浏览器（Chrome/Firefox/Safari）实际支持的只有：normal、bold、lighter、bolder，以及 100–900 中的某些档位——但不是每个档位都有对应字体文件。比如多数网页默认用 system-ui 或 Helvetica，它们通常只提供 400（normal）和 700（bold）两档。

• font-weight: 400 ≈ normal，700 ≈ bold，这两档最稳，必生效
• 300、500、600 是否生效，取决于你加载的字体是否真包含这些字重；查 @font-face 定义里的 font-weight 值确认
• lighter/bolder 是相对计算，依赖父元素值，容易失控，线上慎用
• 别写 font-weight: 550 —— 没有字体支持它，浏览器会就近取整到 500 或 600，但大概率 fallback 到 400

用 CSS 变量统一控制字体粗细更靠谱

硬编码 font-weight: 600 在多个地方，后期想调细一点就得全局搜改。用 CSS 变量能一次改到处，也方便做主题切换。

比如定义一套语义化层级：

body {
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

然后在组件里用：

.btn { font-weight: var(--fw-semibold); }
h2   { font-weight: var(--fw-bold); }

• 变量名带 fw- 前缀，一眼看出是 font-weight，避免和 --color-text 这类混淆
• 值仍选 400/500/600/700 这种标准档位，不写 523 这类非标数
• 如果用了自定义字体（如 Inter、SF Pro），务必检查其 @font-face 是否真声明了对应 font-weight，否则变量再漂亮也没用

font-weight 失效？先看字体本身支不支持

这是最多人卡住的地方：CSS 写对了，但文字就是不加粗，十有八九是字体没这个字重。

打开浏览器开发者工具，选中文字元素，在 Styles 面板看 font-family 实际加载的是哪个字体，再点开 Fonts 标签页——这里会列出当前文本真正用到的字体文件及其 weight 值。

• 如果显示 weight: 400，但你写了 font-weight: 600，说明浏览器找不到 600 字重，自动降级了
• 用 Google Fonts 时，别只加 &family=Roboto，要显式指定字重：&family=Roboto:wght@400;500;700
• 本地字体用 @font-face 加载时，每个字重必须单独声明一个 @font-face 块，并配对正确的 font-weight 值

内联 style 和 !important 不解决根本问题

有人试过写 style="font-weight: 800 !important"，发现还是不粗——这不是优先级问题，是字体压根没 800 这一档。

强行用 !important 只会让调试更难，掩盖真实瓶颈。

• 优先检查 computed styles 里的 actual font weight，而不是看 rules 面板里哪条被划掉了
• 内联样式无法绕过字体缺失问题，它只是把无效声明“写得更用力”而已
• 真正要改的，是字体资源本身，或换一个带所需字重的字体

字体粗细这事，表面是 CSS 属性，底层是字体文件能力。参数填得再准，没对应字重文件，就只是纸上谈兵。

到这里，我们也就讲完了《HTML字体加粗技巧分享》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！