提高 css3 文本旋转质量-前端问题

Improve css3 text rotation quality(提高 css3 文本旋转质量)

本文介绍了提高 css3 文本旋转质量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 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:

The same effect could also be applied by setting the -webkit-backface-visibity to 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:

分别是 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 文本旋转质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！