font-weight 支持关键字（normal/bold/bolder/lighter）和数字值（100–900），但实际生效取决于字体文件提供的字重档位；浏览器不支持其css过渡动画，且不同字体间数值表现差异大，动态变更还可能引发回流。
font-weight 支持哪些值？别瞎填 900 就以为更粗
浏览器对 font-weight 的实际渲染不是线性刻度，很多字体只提供 400（正常）和 700（加粗）两个有效档位，填 100～900 中间值大概率被降级到最近的可用字重。
实操建议：
- 先查目标字体的
@font-face声明，看它真正提供了哪些font-weight值（比如 Google Fonts 页面会明确标出支持的字重） - 优先用语义化关键字：
normal、bold、bolder、lighter，它们由浏览器按字体能力自动映射，比数字更可靠 - 若必须用数字，只在确认字体文件含对应字重时才填
300、500、600等——否则 CSS 里写了也白写
transition font-weight 为什么没动画效果？
绝大多数浏览器不支持 font-weight 的 CSS 过渡动画，不是你写错了，是规范和实现层面就不管这事。Chrome、Firefox、Safari 都把它当作“离散属性”，过渡时直接跳变，看不到渐变加粗过程。
常见错误现象：写了 transition: font-weight 0.3s，hover 时文字还是瞬间变粗，毫无过渡感。
立即学习“前端免费学习笔记（深入）”；
替代方案：
- 用
transform: scale(1.02)搭配轻微opacity变化模拟“强调感”，视觉上更自然 - 如果真要动态粗细变化，得换思路：用 SVG 文字或 Canvas 绘制，自己控制字形描边或填充厚度
- 极少数场景可考虑 Web Font 加载后切换
font-family（比如从 regular 换成 bold 变体），但需预加载，且有 FOIT/FOUT 风险
font-weight 在不同字体家族中的表现差异极大
同一数值在不同字体里粗细可能天差地别。比如 font-weight: 600 在 Inter 里明显比在 system-ui 里粗得多；而有些中文字体（如思源黑体）甚至没有 500 以上字重，填了也无效。
使用场景提示：
- 做设计系统或跨端一致性要求高的项目时，别依赖绝对数值，改用
font-weight: var(--fw-semibold)这类 CSS 变量封装，并为每种字体单独定义合理映射 - 检查 DevTools 的“Computed”面板，展开
font-weight，看最终解析值是不是你期望的那个——有时显示600，实际渲染等效于700 - 中文字体尤其要小心：很多免费字体只打包了
normal和bold两档，所谓“半粗体”根本不存在
font-weight 动态变化时的回流与性能隐患
改变 font-weight 可能触发文本重排（reflow），尤其当加粗导致字宽变化、影响后续元素布局时。这不是小问题，在列表项或响应式卡片里频繁 hover 切换，容易引发肉眼可见的抖动。
性能影响点：
- 字体加粗常伴随字形宽度微增（尤其西文），若父容器宽度固定，可能挤出换行或溢出
- 某些字体在加粗时字间距（
letter-spacing）也会隐式调整，进一步放大布局偏移 - 避免在
scroll或resize回调里动态改font-weight，这类操作极易造成卡顿
最稳妥的做法，是让加粗前后的文本占据相同物理空间——要么提前预留足够宽度，要么用 transform 类方案绕开布局计算。
字体粗细这件事，表面只是个 CSS 属性，背后牵扯字体文件、渲染引擎、排版逻辑三层现实。参数填得再准，也得看字体给不给力。
