为什么 css 变换旋转会使文本难看答案

【问题标题】：why css transform rotate make text ugly为什么 css 变换旋转会使文本难看
【发布时间】：2012-12-01 23:32:54
【问题描述】：

某些浏览器（对我来说：XP 上的 firefox 和 chrome）似乎没有对带有 CSS 旋转的文本应用抗锯齿

为什么它们适用于图像而不是文本？

【问题讨论】：

一个非常新功能的低质量实现。我们可能应该很高兴有任何支持。
不是很新，它自 firefox 3.5（2009 年 6 月）和第一个 chrome 版本（2008 年 12 月）以来就存在caniuse.com/#feat=transforms2d
值得注意的是，虽然实现相当陈旧，但只有 CSS3 的某些模块（可能是 4/50）最近才被正式批准（想想 2011/2012 年）。就整个世界而言，文本旋转是一项新功能。
有时在 chrome 中 translateZ(0) 帮助
webkit 中有一些错误会阻止不同情况下的抗锯齿。 code.google.com/p/chromium/issues/… - 这是其中之一。

【解决方案1】：

糟糕的文本质量显然是您使用的网络浏览器的“故障”，但您应该等待一段时间，它应该会得到修复。随着 Web 开发人员学习如何使用新功能，浏览器程序员必须实现它们，而这需要一些时间才能正常工作。在浏览器的下一个版本中检查它 - 如果文本旋转会越来越多，越来越流行的浏览器会更好地处理它，以正确显示更多网页。

【讨论】：

【解决方案2】：

使用 3D 变换。使用 3D 变换属性，即使您实际上没有进行任何 3D 变换也可以提高性能，如下所示：

它将启动旧 GPU 并获得更流畅的性能。
它会在按钮的默认状态下对文本进行加粗（细化），因此在过渡开始时并不令人意外。

WebKit 有一个令人讨厌的（我称之为错误），其中正在转换/转换的文本看起来很薄而且很糟糕。默认情况下，文本看起来不错，但当按钮处于过渡或变形时，您会闪烁和变细。

希望这会有所帮助。

【讨论】：