問題描述
我使用 CSS3 創(chuàng)建了一系列圓形標(biāo)簽.然后我旋轉(zhuǎn)了這些選項(xiàng)卡，但文本(Windows - Chrome)的質(zhì)量很差，并且在轉(zhuǎn)換時(shí)也變暗/模糊".有哪些替代方案?我是否正確應(yīng)用了我的 CSS?我會(huì)更好地旋轉(zhuǎn)標(biāo)簽并保持文本水平嗎?
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 默認(rèn)不啟用抗鋸齒功能.但是您可以將此 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);
這將強(qiáng)制瀏覽器使用其硬件加速來計(jì)算轉(zhuǎn)換，這將添加一些抗鋸齒作為獎(jiǎng)勵(lì).
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 設(shè)置為 hidden:
The same effect could also be applied by setting the -webkit-backface-visibity to hidden:
-webkit-backface-visibility: hidden;
這是您更新的 jsfiddle(在 Chrome 中測(cè)試)
Here is your updated jsfiddle (tested in Chrome)
http://jsfiddle.net/9eGt3/6/
Firefox 默認(rèn)啟用抗鋸齒，因此不需要 transform3d hack，但抗鋸齒算法的質(zhì)量因?yàn)g覽器版本而異.以下是一些對(duì)比圖:
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.
你最好的辦法是調(diào)整你的字體，使它對(duì)抗鋸齒算法更友好.在這種情況下，選擇更粗更大的字體可能會(huì)有所幫助.
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.
這篇關(guān)于提高 css3 文本旋轉(zhuǎn)質(zhì)量的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！