CSS如何实现文字在悬停时变为粗体平滑过渡_利用transition font-weight-css教程-PHP中文网

font-weight 无法用 transition 平滑过渡，因浏览器不支持其数值插值；可用 transform+opacity 模拟加粗感，或使用支持 wght 轴的可变字体配合 font-variation-settings 过渡。

css如何实现文字在悬停时变为粗体平滑过渡_利用transition font-weight

font-weight 无法用 transition 平滑过渡

直接给 font-weight 加 transition 几乎无效——浏览器不支持在数字字重值（如 400 → 700）之间做插值动画。你看到的“变粗”其实是硬切，没有中间状态，transition 形同虚设。

根本原因是：CSS 规范中 font-weight 是离散可动画属性（animatable），但实际渲染引擎（Chrome/Firefox/Safari）普遍不实现其插值逻辑。即使写了 transition: font-weight 0.3s，也只会触发重排后立即跳变。

替代方案：用 transform + opacity 模拟加粗感

真正能平滑过渡的是 transform 和 opacity。虽然不能改变真实字重，但可通过轻微缩放+微调透明度制造视觉“变重”错觉，人眼几乎无法分辨。

对文字容器设 display: inline-block 或 inline-flex，避免 transform 引发换行
悬停时用 transform: scale(1.02)（放大 2%）+ opacity: 0.98（略降透明度），抑制毛边同时增强厚重感
必须配 will-change: transform, opacity 提前提示渲染层，否则 Safari 下可能闪动

.hover-bold {
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
  will-change: transform, opacity;
}
.hover-bold:hover {
  transform: scale(1.02);
  opacity: 0.98;
}

真·字体加粗且需过渡？只能靠字体文件本身

如果设计要求严格匹配字重变化（比如从 Regular 切到 Bold），唯一可靠方式是提前加载同一字体族的多个字重文件（如 font-weight: 400 和 700），再用 @font-face 声明，并通过 font-variation-settings（可变字体）或切换 font-weight 值来触发。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

前提是字体必须支持可变轴（如 wdth, wght），且你用的是现代可变字体（如 Inter、Roboto Flex）
声明时需启用 font-variation-settings: 'wght' 400，悬停改为 'wght' 700
此时 transition: font-variation-settings 0.3s 才真正生效——但旧版 Chrome（

别指望用 @font-face 加载两个静态 ttf 然后切 font-weight：浏览器不会过渡，只会等新字体加载完再突变。

为什么不用 text-shadow 模拟加粗？

有人试过用多层 text-shadow（如 text-shadow: 0 0 1px #000）模拟加粗，但它在高 DPI 屏幕上易出锯齿，且无法响应字号缩放（rem/em 变化时阴影大小不变），更关键的是：text-shadow 不参与 transition 插值——浏览器只对颜色、透明度、偏移量做动画，模糊半径（第三个值）不可动画。