使用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的字体渲染的较旧文章。