transform导致文字模糊

Question

transform导致文字模糊,各位大神有没有解决方案？百度的解决方案不可行

transform: translate3d（）位移后，文字就模糊了，试了下大家给出来的建议，似乎没用，所以我现在截图加以说明看看有没有其他解决方案？

Answer 1

我在项目中遇到过相同相似的问题，

这是因为transform变换会在浏览器上单独创建一个绘画层并重新进行渲染，rotate渲染的时候，由于图层渲染的时候也处理了周围的文字，如果高度为奇数的文字可能会存在半个像素的计算量，浏览器对这半个像素会进行优化渲染，所以边缘会出现模糊的情况。

后来尝试过下面三种方法

1. 将元素的高度设置为偶数可解决；

2. 将transform: translate(x%, y%)中的y轴单位改成px也可以解决

3. 改成transform: translate(-50%, -52%)也可以解决（如果52%不行的话，可以从51%一个一个1%试试）
   最后用了第三种方法，不过这样改代码有点丑陋...

Answer 2

zoom也可以用

Answer 3

这个要看具体情况，建议参考这篇

Answer 4

试试这个，去锯齿的

-webkit-font-smoothing: antialiased;

备注：没测试过