css - 旋转时文字混乱

Question

我的网站上有文本旋转 45 度的区域，不幸的是，有时该文本的渲染会搞砸。例如，在使用 FF 和 chrome 的 linux 上看起来还不错，但是在 windows 上的相同浏览器上看起来很糟糕。然而，IE 9-10 完美地呈现了旋转的文本。有什么办法可以克服这个乱七八糟的文字吗？

这是一个示例： 示例

.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;}​

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

谢谢

Answer 1

See Wonky text anti-aliasing when rotating with webkit-transform in Chrome.

The answer there recommends amending your transformation with an additional transform that triggers the 3-D processing:

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

In addition to the fix offered there, there are a few other tricks used for cleaning up webfont rendering (see How To: Clean Up Chrome and Safari's Webfont Rendering). Try adding a barely perceptible text-shadow (may or may not work):

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