本文详解如何精准增强文本粗细效果，重点介绍 font-weight 的数值化取值（如 900）替代 bolder，确保字体真正加粗，并避免因字体本身不支持导致的失效问题。
本文详解如何精准增强文本粗细效果，重点介绍 `font-weight` 的数值化取值（如 900）替代 `bolder`，确保字体真正加粗，并避免因字体本身不支持导致的失效问题。
在 css 中，font-weight: bolder 并非“无级放大”式加粗——它只是相对于父元素的 font-weight 值进行相对提升（例如从 normal → bold，或 bold → bolder），实际效果受限于当前字体是否提供对应字重层级。若所用字体仅包含 400（normal）和 700（bold）两个字重，bolder 就无法进一步加粗，视觉上毫无变化。
要实现确定、可控、最大程度的加粗效果，推荐使用 数值化 font-weight：
.txt { font-weight: 900; /* 最粗可用值（超粗体，Ultra Bold） */ text-align: left; margin-top: 100px; margin-left: 25px; margin-bottom: 750px; color: #000; }✅ font-weight 支持以下标准数值（100–900，步进100）：
- 100 – 300：细体到轻体（Thin / Extra Light / Light）
- 400：等同于 normal（常规）
- 500：Medium（中等）
- 600：Semi Bold（半粗体）
- 700：等同于 bold（粗体）
- 800：Extra Bold（特粗体）
- 900：Black / Ultra Bold（超粗体，视觉上最厚重）
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 字体支持是前提：即使设为 900，若所用字体（如系统默认 sans-serif 或自定义 Web Font）未内嵌 900 字重，浏览器将自动向下回退（fallback）至最接近的可用字重（如 700），导致加粗“失效”。
- ✅ 解决方案：检查字体文档，优先选用完整字重家族（如 Google Fonts 中的 Inter、Roboto、Montserrat 均提供 100–900 全范围）；或通过 @font-face 显式加载 font-weight: 900 对应的字体文件。
- ❌ 避免使用 font-weight: “bolder” 或字符串形式（引号错误），CSS 中 font-weight 的关键字（如 bold, normal）无需引号，数值更不可加引号。
? 进阶提示：可结合 font-synthesis: weight（控制浏览器是否模拟字重）与 font-optical-sizing: auto 提升高分辨率下的渲染质量，但核心仍以真实字重支持为基础。
总结：放弃模糊的相对关键词 bolder，改用明确数值 font-weight: 900，并确保目标字体具备该字重——这是实现可靠、极致加粗效果的专业实践路径。