button的font-weight切换导致文字跳动，是因为加粗后字形宽度变化，而inline-block按钮未预留空间，引发重排；flex容器中更明显，需用伪元素占位法（opacity:0+absolute）提前占用加粗宽度。
button 的 font-weight 切换为什么会导致文字跳动？
因为 font-weight 改变后，浏览器会重新计算文字宽度，而 button 默认是 display: inline-block，内容区缩放会直接推挤周围布局。尤其在 flex 容器里，父元素没预留“加粗空间”，子元素一 bold 就撑开，旁边元素跟着移位。
这不是 bug，是字体渲染的自然行为 —— 不同粗细对应不同字形宽度（尤其中文字体差异更明显）。
- 常见现象：
button:hover { font-weight: bold; }一 hover，按钮变宽、文字右移、图标错位 - 移动端更敏感：iOS Safari 对小字号 bold 渲染更激进，跳动更明显
- disabled 状态下
font-weight通常被浏览器忽略，所以别指望它能“统一视觉节奏”
用伪元素占位法稳定宽度（兼容 flex 布局）
核心思路：让父容器始终按“加粗后的宽度”撑开，主文本只负责显示，不参与尺寸计算。
关键不是隐藏伪元素，而是让它参与盒模型计算 —— 所以不能用 visibility: hidden 或 display: none，得用 opacity: 0 + position: absolute 避免影响流式布局，同时保持尺寸贡献。
.btn {
position: relative;
font-weight: normal;
}
.btn::before {
content: attr(data-text);
font-weight: bold;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.btn:hover {
font-weight: bold;
}
-
data-text必须显式写在 HTML 里：<button class="btn" data-text="提交">提交</button> - 如果按钮含图标（如
<i class="icon-save"></i>保存），伪元素内容要包含整个可见文本，否则宽度不准 - 不要给
::before设font-size，它必须和主文本完全一致，否则占位失准
font-weight 数值 vs 关键字：选哪个更可控？
用数字（如 font-weight: 600）比 bold 更可靠，因为不同字体对 bold 的映射可能不一致 —— 某些 Web 字体甚至没有真正意义上的 bold 字重，浏览器会强行模拟，导致宽度突变更大。
- 推荐组合：
font-weight: 400（常规）→font-weight: 600（hover），避开700以上，多数中文字体缺乏完整字重支持 - 检查字体是否真有该字重：用 Chrome DevTools 的 Fonts 面板看 “Actual font weight” 是否匹配你设的值
- 如果用了自定义字体（如
@font-face），务必在font-weight声明时明确指定字重，例如：font-weight: 600;而不是依赖 fallback
禁用态（disabled）下如何保持粗细一致性？
浏览器对 button:disabled 有强干预：自动降低 opacity、覆盖 color、且常忽略 font-weight。想让它也响应 hover 式粗细变化，必须显式接管。
button:disabled {
font-weight: 400 !important;
color: #999 !important;
opacity: 1; /* 先拉回 opacity，否则 font-weight 不生效 */
}
button:disabled:hover {
font-weight: 600;
}
- 必须加
!important—— 浏览器 UA 样式优先级太高 -
opacity: 1是前提，否则文字灰度会压制粗细感知 - 注意：部分旧版 Edge 不支持
button:disabled:hover，需降级为 class 控制（如.btn--disabled:hover）
实际项目里最易被忽略的是字体加载完成前的闪动 —— 页面刚 render 时用的是系统 fallback 字体，等 Web 字体加载完才切换，此时 font-weight 变化会二次跳动。解决它需要配合 @font-face 的 font-display: optional 或 JS 监听 document.fonts.load() 后再激活样式，但这已超出纯 CSS 范畴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
