CSS3 perspective应用时3D容器内文字模糊不平滑的修复问题

3D变换容器文字模糊问题解决方案 #

产生该问题的核心原因是：浏览器默认先将容器内容渲染为普通位图，再执行3D变换操作，变换过程中会对位图进行拉伸/扭曲，矢量文字的抗锯齿效果会在这个过程中丢失，因此仅设置字体平滑属性无法生效。

可以通过以下方案解决：

• 方案1：预放大渲染后缩小（兼容性最好，效果最稳定）
  让浏览器先以更高分辨率渲染内容，再通过变换缩小到目标尺寸，修改CSS如下：

  .container{
      /* 先以2倍大小渲染内容，再通过scale缩小到原尺寸 */
      transform: perspective(120px) rotateY(45deg) scale(0.5);
      zoom: 2;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  

  如果zoom属性不符合你的场景需求，也可以手动将容器内字号、宽高等尺寸设置为目标值的2倍，再通过scale(0.5)缩放到正常大小即可。

• 方案2：触发浏览器高精度3D渲染
  给容器添加特殊属性，强制浏览器使用更高精度的GPU渲染管线处理3D变换：

  .container{
      transform: perspective(120px) rotateY(45deg);
      backface-visibility: hidden;
      transform-style: preserve-3d;
      outline: 1px solid transparent;
      filter: blur(0);
  }
  

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