优先用 表达强重要性， 仅用于无语义的视觉加粗；内联样式 font-weight: bold（勿加引号）适合动态控制；统一加粗应抽离为 .text-bold { font-weight: 700; } 类；加粗失效时优先检查字体字重支持与 css 覆盖。
用 <strong></strong> 还是 <b></b>？语义和渲染其实不一样
两者都能让文字变粗，但浏览器默认样式几乎一样，区别在语义：<strong></strong> 表示内容有强重要性，会被屏幕阅读器加重朗读；<b></b> 纯粹是视觉加粗，无语义。现代 HTML 推荐优先用 <strong></strong>，除非你明确只要“看起来粗”，比如产品名、关键词高亮这类不带强调意图的场景。
常见错误是把 <b></b> 当作“更轻量”的选择——其实没有性能差别，DOM 渲染开销一致，选哪个只取决于你想表达什么。
内联样式加粗：什么时候该用 style="font-weight: bold"
适合临时、局部、动态控制加粗，比如 JS 动态切换某段文字粗细，或 CSS 类还没定义好时快速验证效果。
-
font-weight的值不只有bold，还有normal、100–900（数字越大胆子越粗），bold等价于700 - 别写
font-weight: "bold"——引号是错的，CSS 值不是字符串 - 如果字体本身不支持
700字重（比如某些中文字体只有400和500），浏览器会 fallback 到最接近的可用字重，可能“加粗”无效
CSS 类统一控制加粗：避免重复写 font-weight
项目里多处需要加粗，直接写内联样式会散落各处，难维护。应该抽成 CSS 类：
立即学习“前端免费学习笔记（深入）”；
`.text-bold { font-weight: 700; }`
然后在 HTML 里复用：
`<p class="text-bold">这段会加粗</p>`
注意点：
- 别用
.bold这种过于宽泛的类名，容易和其他库冲突 - 如果加粗要响应不同状态（比如禁用时取消加粗），用属性选择器更稳妥：
button[disabled] .text-bold { font-weight: normal; } - 不要为了“兼容老浏览器”硬写
font-weight: bolder——它相对父元素计算，行为不可控，IE 都早就不需要特别照顾了
加粗失效？先检查这三件事
字体没变粗，大概率不是标签写错了，而是被其他规则覆盖或字体本身限制：
- 用浏览器开发者工具看 computed 样式，确认
font-weight最终值是不是你设的（比如被!important或更高优先级选择器覆盖） - 检查当前字体是否提供对应字重。用
@font-face引入自定义字体时，漏传font-weight: 700对应的文件，就会 fallback 成细体 - 父元素设了
font-weight: lighter或font-weight: 100，子元素即使设bold也可能被压制——CSS 的lighter/bolder是相对计算，不是绝对值
真正麻烦的是字体字重缺失，而不是标签不会用。这点容易被忽略，一卡就是半天。
