css - 提高 css3 文本旋转质量

Question

我使用 CSS3 创建了一系列圆形标签。然后我旋转了这些选项卡，但文本(Windows - Chrome)的质量很差，并且在转换时也会“变暗/模糊”。有哪些选择？我是否正确应用了 CSS？旋转选项卡并保持文本水平会更好吗？

http://jsfiddle.net/jeepstone/9eGt3/

Answer 1

Chrome

默认情况下，Chrome 不启用抗锯齿功能。但是您可以将此 CSS 属性添加到您的元素中以启用它:

transform: translate3d(0,0,0);

这将强制浏览器使用其硬件加速来计算转换，这将添加一些抗锯齿作为奖励。

通过将 -webkit-backface-visibity 设置为 hidden 也可以应用相同的效果:

-webkit-backface-visibility: hidden;

这是您更新后的 jsfiddle(已在 Chrome 中测试)

http://jsfiddle.net/9eGt3/6/

火狐

Firefox 默认启用抗锯齿功能，因此不需要 transform3d hack，但抗锯齿算法的质量因浏览器版本而异。下面是一些对比图片:

它们分别是 Firefox 5、Firefox 9 和 Chrome。

最好的办法是调整字体，使其对抗锯齿算法更友好。在这种情况下，选择更粗更大的字体可能会有所帮助。