按钮hover执行scale变换时字体异常变大的解决咨询

问题原因 #

使用transform: scale()实现按钮缩放时，浏览器在过渡动画后期可能因字体渲染的优化机制，导致字体出现视觉上的尺寸变大异常——这是浏览器为了保证缩放后字体清晰度，自动调整字体渲染逻辑引发的视觉错觉。

解决方案 #

方案1：优化渲染属性，稳定字体显示 #

给按钮添加渲染优化属性，强制浏览器采用更稳定的渲染方式，避免字体异常：

button{
  background-color: #10B981;
  color: white;
  border-radius: 0.5em;
  font-size: 1.1em;
  padding: 0.6em;
  margin-top: 3em;
  border: none;
  transition: transform 0.5s ease-in-out;
  /* 添加以下渲染优化属性 */
  backface-visibility: hidden;
  transform-origin: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
    
  &:hover{
    transform: scale(0.90);
  }
}

方案2：改用非transform方式模拟缩放 #

放弃transform: scale()，通过调整内边距等属性实现缩放效果，从根源避免字体被缩放：

button{
  background-color: #10B981;
  color: white;
  border-radius: 0.5em;
  font-size: 1.1em;
  padding: 0.6em;
  margin-top: 3em;
  border: none;
  transition: padding 0.5s ease-in-out;
    
  &:hover{
    padding: 0.54em; /* 按scale(0.9)的比例缩小内边距 */
  }
}

方案3：使用固定字体尺寸 #

将字体单位从相对单位em改为固定像素值，避免浏览器在元素缩放时自动调整字体大小：

button{
  background-color: #10B981;
  color: white;
  border-radius: 0.5em;
  font-size: 17px; /* 改用固定像素单位 */
  padding: 0.6em;
  margin-top: 3em;
  border: none;
  transition: transform 0.5s ease-in-out;
    
  &:hover{
    transform: scale(0.90);
  }
}

内容的提问来源于stack exchange，提问作者CodeEx