旋转时文字混乱

Question

我的网站上有文本旋转 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;}​

附：我不能使用图像来替换文本，我需要旋转动态文本。

谢谢

Answer 1

见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;