应使用标签实现语义化加粗，因其表示内容重要性高，被搜索引擎和读屏软件识别；仅用于无语义的纯样式加粗。
HTML 里怎么让文字变粗？用 <strong></strong>，不是 <b></b>
语义上，<strong></strong> 表示内容重要性高，浏览器默认渲染为粗体；<b></b> 只是视觉加粗，没语义。搜索引擎、读屏软件都认 <strong></strong>，<b></b> 容易被当成装饰性标签忽略。
常见错误：写成 <b>警告</b>，结果无障碍工具不提示重点；或者在需要强调逻辑权重的地方（比如表单必填项说明）用了 <b></b>，导致语义断裂。
-
<strong></strong>适合：关键提示、错误消息、操作后果（如<strong>删除后无法恢复</strong>） -
<b></b>仅限：纯样式需求且无语义（比如人名在中文段落中想突出但不改变含义） - CSS 中
font-weight设为bold或700是等效的视觉效果，但不传递语义
CSS 控制粗体时，font-weight 值怎么选才靠谱
别无脑写 font-weight: bold。它实际映射到字体的“粗体字重”，但很多 Web 字体只提供 400（常规）和 700（粗体）两档，中间值（如 500、600）可能被浏览器降级为 400 或 700，渲染不可控。
更稳的做法是查清你用的字体支持哪些字重，然后直接写数字：
立即学习“前端免费学习笔记（深入）”；
- Google Fonts 页面会明确标出可用
font-weight值（比如300、400、500、700） - 系统字体（如
"Helvetica Neue", Arial）通常只有400和700可靠 - 避免用
font-weight: bolder或lighter，它们依赖父元素字重，链式计算容易失控
为什么加了 <strong></strong> 还不粗？检查这三处
最常卡在这几个地方，不是标签写错了，而是环境干扰了默认样式：
- CSS 里写了全局重置，比如
strong { font-weight: normal; }—— 直接覆盖了浏览器默认行为 - 父容器设置了
font-weight: 300，而子元素<strong></strong>没显式设更高值，部分浏览器不会自动提升 - 字体本身不包含粗体变体（比如某些自定义 icon 字体或精简版中文字体），
<strong></strong>有语义，但渲染不出粗效果
快速验证：打开开发者工具，看 <strong></strong> 元素的 computed font-weight 是多少，是不是被某条 CSS 强制改成了 400。
React/Vue 里动态加粗，别拼 HTML 字符串
在 JSX 或模板里写 <strong>{text}</strong> 没问题，但有人图省事用 `<strong>${text}</strong>` 然后 dangerouslySetInnerHTML 渲染——这会丢失 React 的事件绑定、props 透传，还可能引入 XSS 风险。
- Vue 模板直接用
<strong>{{ text }}</strong> - React 函数组件里，用
<strong>{text}</strong>，别转字符串再插进去 - 如果文本含用户输入且需保留部分 HTML（比如富文本编辑器输出），必须用专用库（如
DOMPurify）过滤，而不是裸用dangerouslySetInnerHTML
字体粗细这事，表面是视觉，底层是语义、字体支持、CSS 层叠三股力在拉扯。漏掉任意一环，看着像粗了，其实信息没传达到该到的地方。
