优先用 css 的 font-weight 控制按钮文字加粗，而非嵌套 ；因按钮本身是交互控件，语义上不强调内容重要性，嵌套 会干扰可访问性、易被样式覆盖，且不利于维护。
按钮文字加粗该用 <strong></strong> 还是 font-weight？
优先用 CSS 的 font-weight 控制，而不是在按钮里塞 <strong></strong>。按钮本身已是交互控件，语义上不承载“内容重要性”，<strong></strong> 嵌套进去反而干扰可访问性（比如屏幕阅读器可能重复播报“重要 按钮”），也容易被 CSS 重置规则意外覆盖。
button 元素默认就加粗，为什么有时看起来不粗？
常见原因不是没加粗，而是字体字重缺失或样式被覆盖：
-
button默认继承浏览器 UA 样式，通常为font-weight: bold（即 700）——但若你用了自定义字体（如@font-face引入的思源黑体 Light），而没声明font-weight: 700对应的文件，浏览器只能 fallback 到伪粗体（模糊、发虚）或直接退回到 400 - 全局 CSS 重置（如
*, button { font-weight: 400; }）会干掉默认加粗 - 父级设置了
font-weight: 300，而button没显式提升，部分浏览器不会自动增强
验证方法：打开 DevTools → 选中按钮 → 看 Computed 面板里的 font-weight 实际值是不是 700。
怎么安全、可控地让按钮文字变粗？
直接在按钮上写内联 style="font-weight: 700" 最快，但长期项目建议抽成类：
- 用数字值更稳：
.btn-bold { font-weight: 700; }，避免bold关键字在某些字体下映射不准 - 别用
bolder：button { font-weight: bolder; }依赖父元素字重，不可预测，尤其嵌套在font-weight: 200容器里时可能毫无反应 - 如果按钮有多种状态（如
:disabled），记得单独处理：button:disabled { font-weight: 600; }，否则禁用态可能和正常态粗细一样，缺乏视觉反馈
为什么别在 <button>点击</button> 里硬加 <strong></strong>？
这不是语法错误，但会带来实际问题：
- 语义冗余：
button已是可操作元素，其文本重要性由交互行为决定，再套<strong></strong>属于重复强调 - 样式失控：若全局写了
strong { font-weight: normal; }（常见于重置 CSS），按钮文字反而变细 - JS 动态渲染时易出错：比如 React 中写
<button><strong>{text}</strong></button>，虽能跑通，但若后续要加图标、加载态等，结构迅速变臃肿；不如统一用className控制外观
真正需要语义强化的场景极少——比如按钮文案本身就是警告（<button type="submit"><strong>永久删除</strong></button>），此时才考虑 <strong></strong>，且必须配合 aria-live 或 role 提示风险，不能只靠视觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
