优先用 表示语义重要性， 仅用于纯视觉加粗；font-weight 应用数值如 700 并确保字体文件支持；表格加粗需作用于单元格而非 ；JS 动态加粗须避免 innerHTML 拼接以防 XSS。
用 <strong></strong> 还是 <b></b>？语义决定选哪个
加粗不是“让字变粗”就完事，而是先想清楚：这段文字是否承载重要性？<strong></strong> 表示内容有强语义重要性，屏幕阅读器会加重朗读，搜索引擎也更倾向识别其权重；<b></b> 纯属视觉加粗，比如品牌名、产品代号、关键词高亮这类不带强调意图的场景。
常见错误包括：
- 把
<b></b>当“轻量级<strong></strong>”用——两者 DOM 渲染开销完全一致，选哪个只看语义需求 - 在需要 SEO 或无障碍支持的正文提醒、错误提示、操作按钮文案里硬用
<b></b> - 嵌套
<strong><strong>文本</strong></strong>——不报错但语义不叠加，纯属冗余
font-weight 值写 bold 还是 700？字体本身说了算
CSS 的 font-weight: bold 实际等价于 700，但关键在于你用的字体是否真包含这个字重。很多中文字体（如某些“思源黑体”精简版、自定义 WebFont）只提供了 400（normal）和 500，没有 700 文件，此时浏览器会 fallback 到“伪粗体”（synthetic bold），导致文字边缘发虚、可读性下降。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先查字体文档或使用
@font-face时显式声明font-weight: 700对应的文件路径 - 调试时打开 DevTools → Elements → Computed →
font-weight，看最终计算值是不是你预期的700，而不是400或auto - 别写
font-weight: "bold"——引号是语法错误，CSS 值不是字符串 - 若需精细控制（比如比默认 bold 更细一点），直接用数值：
font-weight: 600
表格里给某列加粗，<col> 标签不能直接设 font-weight
<col> 是元数据标签，不渲染、不继承文本样式，给它写 font-weight: bold 完全无效。真正起作用的是选择器穿透到单元格。
稳妥写法分两种：
- 结构清晰时（有
<thead> / <code><tbody>）：<br><code>thead th:nth-child(2) { font-weight: 700; }tbody td:nth-child(2) { font-weight: 700; } - 含
colspan或rowspan时，:nth-child(n)会因 DOM 顺序偏移而失效，必须改用类名或 JS：
手动加class="col-amount"到目标列每个<td> 和 <code><th>，再写 <code>.col-amount { font-weight: 700; }别用
<strong></strong>包每格内容——语义污染且维护成本爆炸，尤其表格动态生成时。JS 动态加粗文本，别拼 HTML 字符串
如果加粗逻辑依赖用户输入或接口返回，直接拼接
<strong></strong>标签字符串极危险：-
element.innerHTML = '<strong>' + userInput + '</strong>'—— XSS 风险敞口 - 后端返回的 HTML 若未过滤，
innerHTML渲染等于执行任意脚本
安全做法是创建元素并注入文本内容：
const strong = document.createElement('strong'); strong.textContent = userInput; // 自动转义 cell.appendChild(strong);若必须渲染可信 HTML（如 CMS 富文本），务必用
DOMPurify.sanitize()过滤后再innerHTML。真正容易被忽略的点：加粗是否生效，最终取决于**字体文件是否加载了对应字重 + CSS 层叠是否被意外覆盖 + 元素是否为行内上下文**。调试时别只盯着标签用了没，先看 computed style 里的
font-weight值和font-family实际加载结果。 -
