CSS过渡为什么不支持字体粗细？

Question

我正在尝试为超链接的字体粗细应用过渡，以在用户悬停时逐渐增加它。

.header a {
  color: black;
  margin-bottom: -50px;
  font-size: 25px;
  text-decoration: none;
  font-weight: 100;
  transition: font-weight 1s ease-in-out;
}

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

<div class="header">
  <a href="#About">Learn More</a>
</div>

当我将鼠标悬停在元素上时，字体粗细在给定时间（1秒）后发生变化。但是，过渡完全没有效果。也就是说，它立即从100的字体粗细更改为900，反之亦然。我在这里做什么错了？

Answer 1

经过一些尝试，这是解决方案：

您显然必须包含一些字体家族才能过渡到工作。 像这样：

font-family: "Arial", sans-serif;

.header a {
  color: black;
  margin-bottom: -50px;
  font-size: 25px;
  text-decoration: none;
  font-family: "Arial", sans-serif;
  font-weight: 100;
  transition: font-weight 1s ease-in-out;
}

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

<div class="header">
  <a href="#About">Learn More</a>
</div>

P.S .：我认为这是由于字母和空格等的大小不同所致，浏览器需要知道特定的字体系列才能相应地调整字体粗细。