Question

这就是我的意思：

div {
  
  background-color:rgb(240,160,100);
  border-radius:4px;
  font-family:arial;
  font-size:15px;
  width:150px;
  text-align:center;
  cursor:pointer;
  }

div:active {
  
  transform: scale(0.98, 0.95);
  
  }

<div>Click Here!</div>

因此，当您单击按钮时，根据浏览器的不同，会发生各种事情。就像'i'上的圆点跳跃或者一些字母在一起被刷，或者有时候整个文字都按像素移动。

如果像这样的小变换，文本会发生什么与元素的其余部分发生的情况不成比例。我认为这可能是由浏览器使用的重新采样算法引起的，该算法设计得快速而清晰？如果有选择的话，我会稍微模糊一点。

因此，如果没有将所有按钮文本转换为位图并缩放它们，那么这些效果有什么办法吗？

Answer 1

据我所知，我认为您可以尝试添加转换以平滑过程。或者您可以尝试使用svg。如果您只想缩放字体而不是尝试更改字体大小并添加过渡到它。我希望这有帮助

div {
  
  background-color:rgb(240,160,100);
  border-radius:4px;
  font-family:arial;
  font-size:15px;
  width:150px;
  text-align:center;
  cursor:pointer;
transition: all 0.3s ease;

  }

div:active {
  
  font-size:14px;
  
  }

<div>Click Here!</div>

有没有办法摆脱缩放文本产生的视觉错误？

1 个答案: