应使用标签实现语义化加粗，因其表示内容重要性高，被搜索引擎和读屏软件识别；仅用于无语义的纯样式加粗。

HTML 里怎么让文字变粗？用 ，不是

语义上， 表示内容重要性高，浏览器默认渲染为粗体； 只是视觉加粗，没语义。搜索引擎、读屏软件都认 ， 容易被当成装饰性标签忽略。

常见错误：写成 警告，结果无障碍工具不提示重点；或者在需要强调逻辑权重的地方（比如表单必填项说明）用了 ，导致语义断裂。

• 适合：关键提示、错误消息、操作后果（如 删除后无法恢复）
• 仅限：纯样式需求且无语义（比如人名在中文段落中想突出但不改变含义）
• 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，它们依赖父元素字重，链式计算容易失控

为什么加了 还不粗？检查这三处

最常卡在这几个地方，不是标签写错了，而是环境干扰了默认样式：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• CSS 里写了全局重置，比如 strong { font-weight: normal; } —— 直接覆盖了浏览器默认行为
• 父容器设置了 font-weight: 300，而子元素 没显式设更高值，部分浏览器不会自动提升
• 字体本身不包含粗体变体（比如某些自定义 icon 字体或精简版中文字体）， 有语义，但渲染不出粗效果

快速验证：打开开发者工具，看 元素的 computed font-weight 是多少，是不是被某条 CSS 强制改成了 400。

React/Vue 里动态加粗，别拼 HTML 字符串

在 JSX 或模板里写 {text} 没问题，但有人图省事用 `${text}` 然后 dangerouslySetInnerHTML 渲染——这会丢失 React 的事件绑定、props 透传，还可能引入 XSS 风险。

• Vue 模板直接用 {{ text }}
• React 函数组件里，用 {text}，别转字符串再插进去
• 如果文本含用户输入且需保留部分 HTML（比如富文本编辑器输出），必须用专用库（如 DOMPurify）过滤，而不是裸用 dangerouslySetInnerHTML

字体粗细这事，表面是视觉，底层是语义、字体支持、CSS 层叠三股力在拉扯。漏掉任意一环，看着像粗了，其实信息没传达到该到的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！