提高css3文本旋转质量 [英] Improve css3 text rotation quality

问题描述

我使用CSS3创建了一系列圆角标签。然后我旋转了这些标签，但文字的质量（Windows - Chrome）很差，并在转换时昏暗/模糊。什么是替代品？我应用我的CSS正确吗？

I've created a series of rounded tabs using CSS3. I've then rotated these tabs, but the quality of the text (Windows - Chrome) is poor and also 'dims/blurs' on transition. What are the alternatives? Have I applied my CSS correctly? Would I be better to rotate the tabs and keep the text horizontal?

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

推荐答案

Chrome

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

Chrome

Chrome doesn't enable anti-aliasing by default. But you can add this CSS property to your elements in order to enable it:

transform: translate3d(0,0,0);

这将强制浏览器使用其硬件加速度来计算转换，

This will force the browser to use its hardware acceleration to calculate the transforms, which will add some anti-aliasing as a bonus.

也可以通过将 -webkit-backface-visibity 设置为 hidden ：

-webkit-backface-visibility: hidden;

这是您更新的jsfiddle（在Chrome中测试）

Here is your updated jsfiddle (tested in Chrome)

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

Firefox默认情况下启用反锯齿，因此不需要transform3d hack，但是反锯齿算法的质量不同浏览器版本。以下是一些比较图片：

Firefox enables anti-aliasing by default so no transform3d hack is required, but the quality of the anti-aliasign algorithm varies among the browser version. Here are some comparison images:

< img src =https://i.stack.imgur.com/VlcNU.pngalt =Firefox 9>

这些分别是Firefox 5，Firefox 9和Chrome。

Those are Firefox 5, Firefox 9 and Chrome respectively.

调整你的字体，以使它更加友好的抗锯齿算法。在这种情况下，选择更大胆和更大的字体可能会有帮助。

Your best bet here is to tweak your font in order to make it more friendly to the anti-aliasing algorithm. In this case, choosing a bolder and bigger font might help.

这篇关于提高css3文本旋转质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！