提高css3文本旋转质量

Question

我使用CSS3创建了一系列圆形标签.然后我旋转了这些标签,但文本的质量(Windows - Chrome)很差,并且在过渡时也会"变暗/模糊".有哪些替代方案？我是否正确应用了我的CSS？我会更好地旋转标签并保持文本水平吗？

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

Answer 1

铬

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.

这里你最好的选择是调整你的字体,以使其对抗锯齿算法更友好.在这种情况下,选择更大胆和更大的字体可能会有所帮助.