HTML加粗文字方法：font-weight属性详解

HTML中font-weight属性的加粗效果远不止简单设置“bold”或数字值那么简单——它实质上是字体文件支持、浏览器渲染机制与操作系统字体栈深度协同的结果：优先选用100–900之间的整数数值（如400/700）并确保对应字重真实存在于所用字体中，避免依赖不可控的“bolder”“lighter”或未提供的非标准值（如650、900），否则浏览器将静默降级或模拟加粗导致文字发虚；同时需通过@font-face精确声明、Google Fonts显式参数引入、document.fonts.check()动态验证及DevTools计算值核查，层层落实字重真实性——真正掌控加粗，始于对字体底层能力的敬畏与实证。

font-weight 值写成字符串会失效

很多新手把 font-weight 设成 "bold" 或 "normal" 以外的字符串（比如 "bolder"、"lighter"），结果没反应——不是 CSS 不生效，是浏览器对这些关键字的支持依赖字体本身是否提供对应字重。

• "bold" 和 "normal" 是最稳妥的，几乎所有字体都支持
• "bolder"/"lighter" 是相对当前父元素计算的，嵌套深了容易失控
• 数字值（100–900）才是真·可控方式，但前提是字体文件里真有这个字重（比如 Roboto 有 300/400/500/700，但不支持 650）
• 用 @font-face 引入自定义字体时，务必检查 font-weight 声明是否和实际文件匹配，否则浏览器会静默降级到 400

加粗后文字发虚或模糊

这是字体渲染层面的问题，尤其在 Windows + Chrome 下常见。根本原因不是 CSS 写错了，而是浏览器对非整数字重（如 600）或未安装对应字重的字体做了模拟加粗（fake bold），强行拉伸笔画导致边缘失真。

• 优先用字体厂商提供的原生字重（比如 Google Fonts 页面上明确标出的 600 链接）
• 避免在 font-weight: 600 的基础上再叠一层 text-shadow: 0 0 1px black 来“假装加粗”，这会让模糊更明显
• 如果必须兼容老字体，可加 -webkit-font-smoothing: antialiased（仅限 WebKit），但别滥用，它会影响整个文本块的清晰度

font-weight 在不同浏览器默认值不一致

Chrome 和 Safari 对某些字体（尤其是系统 UI 字体如 -apple-system）默认启用更细的字重（font-weight: 400），而 Firefox 可能按传统逻辑走 500，导致同一段 CSS 在不同浏览器里粗细不一。

• 显式声明 font-weight: 400 或 500 能消除歧义，别依赖浏览器默认
• 用 font-weight: inherit 要小心：如果父元素是 600，子元素继承后可能意外变粗，尤其在组件库嵌套场景下
• 检查 DevTools 的 Computed 面板里 font-weight 实际解析值，有时显示 normal 但背后是 400，有时显示 bold 却是 700，数值比文字更可靠

使用 font-weight: 900 却没变粗

不是代码写错，是字体压根没提供 900 字重。浏览器不会报错，只会悄悄 fallback 到最近可用的字重（比如 700 或 800），你完全感知不到。

• 查字体文档或用 font-display: swap 配合 font-weight 测试加载行为
• 在 Google Fonts URL 里手动加上 &display=swap&family=Roboto:wght@400;700;900 才算真正请求了 900 版本
• 用 @supports (font-weight: 900) 做特性检测意义不大，因为支持语法 ≠ 支持该字重，得靠 JS 检测 document.fonts.check('900 16px "Roboto"')

字体字重这事，表面是 CSS 属性，底层是字体文件、浏览器渲染策略、操作系统字体栈三者咬合的结果。改一个 font-weight 值之前，先确认那个数字在你用的字体里真实存在。

终于介绍完啦！小伙伴们，这篇关于《HTML加粗文字方法：font-weight属性详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！