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中，一些单词看起来扭曲/模糊。 2个看似“奇怪”的特定词语是：联系人和投资组合。为什么某些词会搞砸，但其他一切都没关系？

我认为在这个单词的末尾有一个'圆形'字母（c，o，q等）所以我做了一些测试（并非详尽无遗），我改变了投资组合：投资组合和投资组合这是好的，但如果我尝试了Portfoliq，Protfolie或Portfolio，那么它就会被扭曲。

关于为什么会发生这种情况的任何想法以及任何解决方法？

Answer 1

Chrome使用Windows GDI在Windows上进行文字绘制。我猜测要旋转，它会将水平文本绘制到内存中的位图，然后旋转它并将其渲染到屏幕上。可能是保留字体平滑的问题，或者假设水平方向正在进行font hinting，则应用变换;导致像素失真。您可能也对subpixel rendering感兴趣。

这是a blog比较chrome和firefox中的子像素渲染。 This是一篇关于Firefox字体渲染的旧文章。

使用webkit变换的奇怪的看的词在镀铬物转动

1 个答案: