問題描述
我使用 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 文本旋轉質量的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！