旋轉時出現文字亂碼

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;