我使用
CSS3创建了一系列圆形选项卡.我已经旋转了这些选项卡,但是文本的质量(Windows – Chrome)很差,并且在转换时也会变暗/模糊.什么是替代品？我是否正确应用了我的CSS？我会更好地旋转标签并保持文本水平吗？
解决方法
铬
默认情况下,Chrome不启用抗锯齿功能.但是,您可以将此CSS属性添加到元素中以启用它：
transform: translate3d(0,0);
这将强制浏览器使用其硬件加速度来计算变换,这将增加一些抗锯齿作为奖励.
将-webkit-backface-visibity设置为hidden可以同样的效果：
-webkit-backface-visibility: hidden;
这是您更新的jsfiddle(在Chrome中测试)
火狐
默认情况下,Firefox可以启用抗锯齿功能,因此不需要使用transform3d黑客攻击,但是反锯齿算法的质量因浏览器版本而异.以下是一些比较图：
那些分别是Firefox 5,Firefox 9和Chrome.
你最好的打算是调整你的字体,以使它更加友好的抗锯齿算法.在这种情况下,选择更大更大的字体可能有所帮助.
