使用webkit轉換奇怪的單詞在chrome中旋轉

Question

我試圖在閱讀關於如何執行此操作的文章後，在一個小測試網頁上獲得一些垂直文本。在我的CSS，我有以下：

#navMenu li{ 
    list-style:none; 
    float:left; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

而且navMenu在我的標記是：（！）

<ul id="navMenu"> 
    <li>Home</li> 
    <li>About</li> 
    <li>Contact</li> 
</ul> 

這在FF 3.6，IE8工作正常，但在Chrome一些字看起來失真/模糊。看起來很奇怪的兩個特別的詞是：聯繫和投資組合。爲什麼某些單詞會搞砸，但所有其他單詞都可以？

我認爲這是一個'圓'字（c，o，q等）在單詞的末尾，所以我做了一點測試（絕不是詳盡的），我將Portfolio更改爲：Portfolix和Portfoliw沒關係，但如果我嘗試了Portfoliq，Protfolie或Portfolit，那麼它就會失真。

任何想法爲什麼發生這種情況和任何方法來糾正它？

Answer 1

Chrome在Windows上使用Windows GDI進行文本繪製。我猜想要旋轉，它會將水平文本繪製到內存中的位圖，然後旋轉它並將其呈現在屏幕上。可能是保留字體平滑的問題，或者font hinting正在完成假設水平方向，然後應用轉換;導致像素失真。您可能也有興趣subpixel rendering。

這裏的a blog比較鉻和Firefox的子像素渲染。 This是一篇關於Firefox的字體渲染的較舊文章。