font-weight写了但没变粗，先看字体支不支持；绝大多数情况是当前字体未提供对应字重，如微软雅黑仅含400和700两档，设600会就近回退至400，需通过devtools fonts面板验证实际加载字重，并确保google fonts或@font-face显式声明匹配字重。
font-weight写了但没变粗，先看字体支不支持
绝大多数情况不是你写错了，而是当前 font-family 根本没提供对应字重。比如系统字体 Microsoft YaHei（微软雅黑）只含 400 和 700 两档，设 font-weight: 600 会被浏览器就近取整——大概率回退到 400，看起来完全没变化。
验证方法：打开开发者工具 → 选中元素 → 切到「Fonts」面板，看实际加载的字体 weight 是多少；再点开字体名，确认它是否真有该字重文件。
- Google Fonts 必须显式声明字重，例如：
https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700，只写Inter默认只加载 400 和 700 - 自定义
@font-face时，font-weight值必须和文件严格匹配，不能用medium代替500 - Mac 上的
PingFang SC、Windows 的SimSun等系统字体，多数只有 400/700，中间值基本无效
font-weight: bold 比 700 更可靠
bold 是关键字，浏览器会尽力匹配当前字体中最接近的“粗体”字形；而 700 是数值，要求字体文件里必须有严格对应的字重声明，否则可能 fallback 到 400，甚至触发伪粗（文字发虚、模糊）。
尤其在中文字体或某些 Web Font 中，700 经常不可靠。日常强调推荐直接用 font-weight: bold，语义清晰、兼容性好、降级行为可预期。
- 需要精细控制层级（如按钮比标题细一点）才考虑
600，但务必先验证字体支持 - 避免写
550、623这类非标准值，浏览器会就近取整，最终大概率还是 400 -
normal等价于400，bold等价于700，但语义和兼容性差异很大
被更高优先级样式覆盖了
写好了 .btn:hover { font-weight: 700; } 却没反应？先打开 DevTools 的「Styles」面板，看这条规则是不是被划掉（strikethrough）。常见原因：
- UI 框架（如 Ant Design、Element Plus）内部用了高特异性选择器重置字体粗细
- 父元素设置了
font-weight: normal，子元素未显式重写，继承生效 - JS 动态设置了
element.style.fontWeight = 'normal'，内联样式优先级高于 CSS - 全局
body { font-weight: 400 !important; }直接压制了所有子级
别急着加 !important，优先提升选择器权重，比如把 .btn 改成 button.btn 或 body .btn。
font-weight 本身不支持平滑过渡
如果用 transition: font-weight 0.2s 想实现 hover 加粗动画，会发现它是阶梯式跳变，不是渐变。因为浏览器不支持 font-weight 的插值过渡，只能在可用字重之间硬切。
真要动态切换粗细，建议用 CSS 变量 + transition 配合更轻量的视觉手段：
- 用
transform: scale(1.02)+opacity模拟强调，硬件加速更稳 - 变量定义：
:root { --fw-semibold: 600; }，使用：font-weight: var(--fw-semibold); - 避免在 scroll/mousemove 中频繁改
font-weight，旧版 Safari 或低端安卓机容易卡顿
最常被忽略的一点：字体字重缺失是根本原因，不是 CSS 写得不够多。检查 Fonts 面板比反复调样式更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
