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 以降低小数位。您会发现这种简单的修复通常会消除模糊。