
本文详解如何通过 `font-weight` 属性精准控制文本粗细,重点说明为何 `bolder` 不够可靠,以及如何使用数值(如 `900`)实现最大加粗效果,并附带兼容性提示与实用建议。
在 CSS 中,font-weight 是控制文字粗细的核心属性。你当前使用的 font-weight: bolder 是一个相对关键字——它并非固定值,而是相对于父元素的字体粗细“再加一档”。若父元素本身已是 bold(即 700),bolder 可能无法进一步加粗,甚至在某些字体中无明显变化,这正是你感觉“不够 bold”的根本原因。
要获得稳定、可预测且最大程度的加粗效果,推荐直接使用数值关键字:
.txt {
font-weight: 900; /* 最粗等级(超粗体),等同于 'black' 或 'ultra-bold' */
text-align: left;
margin-top: 100px;
color: #000;
margin-bottom: 750px;
margin-left: 25px;
/* justify-content: left; ← 注意:该属性对普通块级文本无效,仅适用于 Flex/Grid 容器 */
}✅ 关键数值对照表(W3C 标准):
动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包
- 100 → Thin
- 200 → Extra Light
- 300 → Light
- 400 → Normal(默认值,等同于 normal)
- 500 → Medium
- 600 → Semi Bold
- 700 → Bold(最常用加粗值)
- 800 → Extra Bold
- 900 → Black / Ultra Bold(视觉上最粗,推荐用于强强调)
⚠️ 重要注意事项:
- 数值生效的前提是所用字体实际提供了对应字重。例如系统默认 sans-serif 通常只包含 400 和 700,此时设 900 可能被浏览器降级为 700。建议搭配 Google Fonts 或 Adobe Fonts 等支持多字重的字体库(如 'Inter', 'Roboto', 'Montserrat'),并在 @font-face 中明确引入 font-weight: 900 版本。
- 避免滥用 900:过度加粗可能影响可读性与设计平衡,建议优先用 700 满足常规加粗需求,仅在标题、关键标签等需强视觉层级处使用 900。
- 移除无效声明:justify-content: left 对 .txt 这类非 Flex/Grid 容器无作用,应删除以保持样式表简洁。
总结:告别模糊的 bolder,拥抱明确的数值控制——font-weight: 900 是实现极致加粗的可靠方案,但务必结合字体支持度与设计语境综合判断。









