Почему CSS-переходы не работают для шрифта?

Я пытаюсь применить переход для веса шрифта гиперссылки, чтобы постепенно увеличивать его при наведении пользователя.

.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 и наоборот. Что я здесь делаю неправильно?


html css
person Chris Lallo    schedule 18.05.2019    source источник
comment
Возможный дубликат Переход Font-Weight CSS в Chrome   -  person jmalenfant    schedule 19.05.2019
comment
Я видел это, и это было бесполезно для меня   -  person Chris Lallo    schedule 19.05.2019
comment
Между прочим, font-weight является анимируемым свойством   -  person Rob    schedule 19.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

После некоторых попыток это решение:

По-видимому, вы ДОЛЖНЫ включить некоторое семейство шрифтов для перехода к работе. Вот так:

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.: Я думаю, что это связано с разными размерами букв и пробелов и т. д., что браузеру необходимо знать конкретное семейство шрифтов, чтобы соответствующим образом изменить размер шрифта.

person DigitalJedi    schedule 18.05.2019