html - 为什么 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.:我认为这是由于字母和空格等的大小不同......，浏览器需要知道特定的字体系列才能相应地调整字体粗细。