提高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。

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

Answer 2

正如我所提到的，使用javascript可以使转换更平滑，而不会破坏文本或边框。用这个替换CSS转换似乎有很大帮助。这是使用jQuery - 当然使用您选择的工具：

// <li> needs position:relative; in the CSS
$('li').hover(
    function(){
        $(this).stop().animate({'top':'-10px'});
    },function(){
        $(this).stop().animate({'top':'0'});
    }
);

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

我很幸运能够经常使用CSS3，所以这对我来说不是一个专业领域 - 但遗憾的是我不得不删除现有的CSS悬停转换以使其工作。您可以使用javascript检测技术回退到CSS转换，例如将class="js-enabled"添加到body标记（当然使用js）并在CSS选择器中使用它。

除此之外，我认为除非您想使用图像（bah）或等待几年，否则浏览器可以更好地处理这些内容（grr）。不要将此视为福音，有人可能会为您提供解决方案 - 但我认为我至少提供了一种解决方法。