如何使字体大小平稳变小而不会跳转？

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>