旋转时出现文字乱码

Question

我在我的网站上有文字旋转45度的区域，但不幸的是，文本的渲染有时会混乱。例如，在Linux上使用FF和chrome看起来相对比较好，但是在windows上的相同浏览器上它看起来很糟糕。但是，IE 9-10呈现完美地旋转文本。有什么方法可以克服这种混乱的文字？

下面是一个例子： example

.wrap {height:200px; width:200px; position: absolute; top:100px;left:100px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.test1 {background: green; width:150px; height:30px; color:white;text-align: center;line-height:30px;font-family:arial; font-size:12px;font-weight:bold;}​ 

附：我无法使用图像替换文字，我需要旋转动态文字。

谢谢

Answer 1

请参阅Wonky text anti-aliasing when rotating with webkit-transform in Chrome。

有建议修改你的转换与其他转换触发3 d处理答案：

-webkit-transform: rotate(.7deg) translate3d(0, 0, 0); 

除了提供在那里，有用于清理web字体渲染一些其他技巧修复（见How To: Clean Up Chrome and Safari's Webfont Rendering）。尝试添加一个几乎感觉不到text-shadow（可能或可能不会工作）：

text-shadow: rgba(255,255,255,0.01) 0 0 1px;