有没有办法消除因缩放文本而产生的视觉错误？

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>

​