如何在没有跳跃的情况下使这个字体大小平滑？

Question

我正在尝试逐渐减小字体的大小.但看起来它变小时会摇晃.如何让它看起来光滑？

.name:hover {
  color: green;
  transition-property: font-size;
  transition-duration: 2s;
  transition-timing-function: ease;
  font-size: 5px;
}

<div class="name">Name</div>

Answer 1

用一个transform:scale代替:

.name {
    transition: transform 2s;
    transform-origin: left
}
.name:hover {
    color: green;
    transform: scale(0.5);
}

<div class="name">Name</div>