为什么使用CSS旋转会使文本变丑？

Question

10

一些浏览器（例如我的XP上的Firefox和Chrome）似乎不会在应用CSS旋转后的文本上应用抗锯齿。

为什么它们在图像上应用而不是在文本上应用？

- Yukulélé

低质量的实现，这是一个非常新的功能。我们可能应该庆幸有任何支持。 - le3th4x0rbot

这并不是很新的技术，自从Firefox 3.5（2009年6月）和第一个Chrome版本（2008年12月）就已经存在了。http://caniuse.com/#feat=transforms2d - Yukulélé

值得注意的是，尽管实现已经相当老了，但只有某些 CSS3 模块（可能是 4/50）最近才被正式批准（大约在 2011/2012 年）。就整个世界而言，文本旋转是一项新功能。 - le3th4x0rbot

2

有时在Chrome中使用translateZ（0）会有帮助。 - zb'

1

translateZ(0) 在 Chrome+win7 上似乎工作良好，我已将其添加到我的测试中：http://dabblet.com/gist/4281185 我稍后会在 XP 上进行测试。 - Yukulélé

2个回答

1

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

- ghoot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wandarkaf · Accepted Answer

使用3D变换。即使您实际上没有进行任何3D变换，使用3D变换属性也可以增强性能，具体如下：

Webkit存在一个令人讨厌的问题（我会称之为错误），即被变换/转换的文本看起来很稀疏和糟糕。默认情况下文本看起来很好，但在按钮处于转换或被变换时，文本会闪烁和变稀疏。

希望这可以帮到您。