我的网站上有文字旋转45度的区域，不幸的是，有时文本的渲染很混乱。例如，在使用FF和chrome的Linux上看起来相对不错，但是，它在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;}
P.S。我无法使用图像替换文本，我需要旋转动态文本。
由于
答案 0 :(得分：4)
请参阅Wonky text anti-aliasing when rotating with webkit-transform in Chrome。
答案建议修改您的转换，使用另外的转换来触发3-D处理：
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
除了那里提供的修复，还有一些其他技巧用于清理webfont渲染（请参阅How To: Clean Up Chrome and Safari's Webfont Rendering）。尝试添加几乎不可察觉的text-shadow（可能或可能不起作用）：
text-shadow: rgba(255,255,255,0.01) 0 0 1px;