为何CSS transition无法作用于font-weight？求助解决过渡失效问题

嘿，这个问题我之前也踩过坑！核心原因是普通字体的字重是离散值，浏览器没法在非连续的字重级别之间做平滑过渡。

原因详解 #

大部分系统默认字体（比如无衬线字体）只提供几个固定的字重档位（比如100、400、700、900），没有中间的渐变层级。当你设置transition: font-weight 1s时，浏览器找不到100到900之间的“过渡中间态”，只能直接从一个字重跳转到另一个，看起来就像过渡完全无效。

两种可行解决方案 #

1. 使用支持可变字重的字体（推荐）

可变字体（Variable Fonts）支持连续的字重变化（从100到900之间的任意值），浏览器可以轻松实现平滑过渡。比如Google Fonts里的Inter、Roboto Flex都是这类字体的代表。

示例代码：

/* 先引入支持可变字重的Inter字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.header a {
  color: black;
  margin-bottom: -50px;
  font-size: 25px;
  text-decoration: none;
  font-weight: 100;
  font-family: 'Inter', sans-serif; /* 指定使用可变字体 */
  transition: font-weight 1s ease-in-out;
}

.header a:hover {
  font-weight: 900;
}

这样设置后，鼠标悬停时字重就会从100平滑过渡到900啦。

2. 用transform模拟加粗效果（替代方案）

如果不想引入新字体，可以用transform: scale()模拟视觉上的加粗效果，配合过渡实现平滑变化：

.header a {
  color: black;
  margin-bottom: -50px;
  font-size: 25px;
  text-decoration: none;
  font-weight: 100;
  transition: transform 0.3s ease-in-out;
  display: inline-block; /* 必须添加，确保transform生效 */
}

.header a:hover {
  transform: scale(1.1); /* 横向缩放模拟加粗感 */
  font-weight: 900; /* 可选：同时切换字重，增强视觉效果 */
}

内容的提问来源于stack exchange，提问作者Chris Lallo