为什么 CSS 转换旋转会使文本变得丑陋

Question

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

示例：http://dabblet.com/gist/4281185

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

Answer 1

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

1. 它将启动 ol' GPU 并获得更流畅的性能。
2. 它会在按钮的默认状态下破坏（精简）文本，因此过渡开始时也就不足为奇了。

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

希望这有帮助。

Answer 2

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