html - Chrome 和 Firefox 中的模糊文本

Question

当我想旋转一个 div 时，我也想旋转文本，但我仍然遇到抗锯齿问题。文字很模糊，我无法修复它。该效果出现在 Firefox 和 Chrome 中。

我找到了这个解决方案，但它对我不起作用。

-webkit-backface-visibility: hidden;

html

<div id="rotate">
    <span>Hi, iam rotated blurry text </span> 

</div>

CSS

#rotate{
margin-top:30px;
    -moz-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    -o-transform: rotate(-9deg);
    -webkit-transform: rotate(-9deg);
    transform: rotate(-9deg);
background:#292929;
font-size:30px;
color:green;
display:inline-block;
}

链接:http://jsfiddle.net/P52Yu/6/

请帮助:)

Answer 1

当涉及到转换时，Chrome 有时很难处理小数点后很多位的数字。尝试对这些数字执行 parseInt 以降低小数位。您会发现通过这个简单的修复，模糊通常会消失。