按钮文字加粗最直接方式是显式设置font-weight: 700（等价于bold），因浏览器默认button为normal（即400）；需注意字体支持、样式覆盖及跨平台渲染差异。
按钮内文字加粗用 font-weight 最直接
默认按钮文字不加粗，是因为浏览器对 元素应用了基础样式（通常是 font-weight: normal）。想让它变粗，最稳妥的方式是显式设置 CSS 的 font-weight 属性。
注意：别用 或 包裹按钮文字——这会破坏语义，且可能被屏幕阅读器误读为强调内容，而“加入购物车”只是操作指令，不是语义强调点。
推荐写法：
<button style="font-weight: bold;">加入购物车</button>
或更规范地走 class：
<button class="btn-add-to-cart">加入购物车</button>
配合 CSS：
.btn-add-to-cart { font-weight: 700; }
700 比 bold 更明确，兼容性也更好；避免用 600 或 800——部分字体不支持中间字重，容易回退到 normal。
用 font-weight 但按钮没变粗？检查这三点
常见失效原因不是写法错，而是样式被覆盖或字体本身限制：
-
font-weight值被更高优先级的 CSS 覆盖（比如框架自带的button { font-weight: 400; }），用浏览器开发者工具检查 computed 样式，看最终生效的是哪条规则 - 当前字体（如某些 icon 字体或自定义 Web Font）只提供
normal字重，即使写了700也渲染不出粗体，换系统默认字体（如system-ui, -apple-system）试试 - 按钮用了
text-transform: uppercase且字体本身窄细，视觉上“粗感”会被削弱，可同步微调letter-spacing或加一点font-size
React/Vue 等框架里按钮加粗逻辑一样吗
完全一样——框架生成的 仍是标准 HTML 元素，CSS 规则照常生效。但要注意动态类名或 scoped 样式带来的作用域限制：
- Vue 单文件组件中用了
，需确保 class 选择器能命中按钮，或改用深度选择器:deep(.btn-add-to-cart) - React 中若用 emotion/styled-components，直接在组件样式里写
font-weight: 700即可，无需额外处理 - 不要在 JSX/模板里写
style={{ fontWeight: 'bold' }}这种内联对象——虽然能用，但不利于复用和维护，优先走 class
加粗后按钮宽度微变？这是正常现象
字体加粗会让字符实际占用空间略增（尤其英文或数字），导致按钮宽度轻微扩大。如果布局敏感（比如多个按钮并排、等宽栅格），建议：
- 给按钮统一设
min-width或width，防止抖动 - 用
box-sizing: border-box确保 padding/border 不影响宽度计算 - 避免仅靠文字内容撑开按钮——提前预估长度，用
white-space: nowrap+overflow: hidden控制溢出
真正容易被忽略的是：加粗效果在不同操作系统渲染差异明显（macOS 的 San Francisco 字体对 700 渲染更克制，Windows 的 Segoe UI 则更“实”），上线前务必在真机或主流系统截图对比。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
