当旋转时文本搞砸(Text messed up when rotated)

我有我的站点区域，其中文本是旋转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:

请参阅在Chrome中旋转时靠不住的文本抗锯齿WebKit的变换 。

有建议有附加修改您的转型改造，答案触发3-d的处理：

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

除了提供有修复，也有用于清理web字体渲染一些其他技巧（请参阅如何：清理Chrome和Safari的web字体渲染 ）。 尝试添加一个几乎难以察觉的text-shadow （可能会或可能无法正常工作）：

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

文章来源: Text messed up when rotated