优先用 ,因其具语义重要性且利于seo与无障碍;仅用于纯视觉加粗。css中应查清字体字重并用数字值(如700)设定,避免bold模拟加粗失真。

用 <strong></strong> 还是 <b></b>?语义和渲染的区别
两者都能让文字变粗,但浏览器默认样式一致不等于用途相同。<strong></strong> 表示内容有强重要性,屏幕阅读器会加重语气;<b></b> 仅表示“视觉加粗”,无语义强调。搜索引擎和无障碍工具更依赖 <strong></strong> 的语义。
实际开发中优先选 <strong></strong>,除非你明确只需要样式效果(比如品牌名、产品代号等不带强调意图的短文本)。
- SEO 和可访问性场景下,
<strong></strong>是唯一推荐 -
<b></b>在旧文档或纯样式需求中可用,但现代 HTML5 规范已弱化其地位 - 不要用
<font></font>标签——它已被废弃,且无法通过 CSS 覆盖时更难维护
CSS 的 font-weight 怎么设才可靠
直接写 font-weight: bold 看似简单,但字体是否真有 bold 字重,取决于当前字体文件是否包含该字重。很多自定义字体只提供了 regular(400),这时 bold 会被浏览器模拟加粗,效果发虚、锯齿明显。
稳妥做法是查清字体支持的字重范围,再用数字值(如 600、700)显式声明,并在 @font-face 中加载对应字重文件。
立即学习“前端免费学习笔记(深入)”;
- 系统字体(如
system-ui,Segoe UI)通常支持400/600/700,可放心用 - Google Fonts 或自托管字体,务必检查其提供的字重选项,避免只引了
400却写了font-weight: 700 - 用
font-weight: bolder或lighter容易失控——它基于父元素推算,层级深时行为不可预测
内联样式、class 还是全局规则?怎么选
粗体不是孤立样式,它常和上下文语义、设计系统绑定。硬写 style="font-weight: 700" 看似快,但后期改字号/颜色/行高时得逐个找,维护成本飙升。
推荐按粒度分层处理:基础语义用 <strong></strong>,设计规范用 class(如 text-emphasis),全局统一控制用 CSS 变量或预设。
- 临时调试可用内联 style,但上线前必须移除
- 项目里有设计系统时,粗体应归入 typography tokens,比如
--font-weight-bold: 700 - 避免给
<strong></strong>写死font-weight,除非全站要降级为600(比如为了更柔和的视觉)
遇到 font-weight 不生效?先看这三点
写对了代码却没变粗,大概率不是语法错,而是被更高优先级规则覆盖、字体缺失,或继承链干扰。Chrome DevTools 的 Computed 面板能立刻暴露真实生效值。
- 检查 computed 值是不是
400—— 如果是,说明某条规则强制设回了 normal - 看 Fonts 面板里当前文字实际渲染的是哪个字体文件,右键“Show fonts”确认是否加载了 bold 版本
- 留意父元素有没有
font-weight: normal !important这类强覆盖,子元素用<strong></strong>也救不回来
真正麻烦的从来不是“怎么加粗”,而是“什么时候不该加粗”——比如按钮文字用 <strong></strong> 会干扰按钮本身的语义,表格表头该用 <th> 自带加粗而非额外套标签。这些细节不写进规范,就容易在协作中反复返工。</th>











