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

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 选择器中使用它。

除此之外，我认为除非您想使用图像（呸）或者再等几年直到浏览器可以更好地处理这些东西（grr），否则您已经筋疲力尽了。不要将此视为福音，有人可能会为您提供解决方案 - 但我想我至少会提供一个解决方法。