使用webkit变换奇怪的单词在chrome中旋转 [英] Strange looking words using webkit transform rotate in chrome

问题描述

在阅读关于如何执行此操作的文章后，我试图在一个小测试网页上获得一些垂直文本。在我的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>主页< / li> 
< li>关于< / li> 
< li>联系人< / li> 
< / ul> 
  

在FF 3.6，IE8（！）中可以正常工作，但在Chrome中某些单词看起来失真/模糊。看起来很奇怪的两个特别的词是：联系和投资组合。为什么某些单词会搞砸，但所有其他单词都可以？

我认为这个词的末尾有一个'round'字母（c，o，q等），所以我做了一些测试意味着详尽无遗），我将Portfolio更改为：Portfolix和Portfoliw，但是如果我尝试使用Portfoliq，Protfolie或Portfolit，那么它会被扭曲。

任何有关为什么会发生这种情况的想法和任何方式来补救它？

解决方案

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

下面是博客，比较Chrome和Firefox中的子像素渲染。 这是一篇关于Firefox字体渲染的较旧文章。

I've trying to get some vertical text on a little test webpage after reading an article on how to do this. In my CSS I have the following:

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

And the navMenu in my markup is:

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

This works fine in FF 3.6, IE8(!) but in Chrome some of the words look distorted/fuzzy. 2 particular words that look 'odd' are: Contact and Portfolio. Why would certain words be messed up but all others are okay?

I thought it was having a 'round' letter (c, o, q etc) at the end of the word so I did a little bit of testing (by no means exhaustive), I changed Portfolio to: Portfolix and Portfoliw which were okay but if I tried Portfoliq, Protfolie or Portfolit then it's distorted.

Any ideas as to why this happens and any ways to remedy it?

解决方案

Chrome uses Windows GDI for text drawing on Windows. I'm guessing that to rotate, it will draw the horizontal text to a bitmap in memory and then rotate it and render it to the screen. Could be an issue with preserving the font smoothing or maybe font hinting is being done assuming the horizontal orientation then the transformation is applied; resulting in the pixel distortion. You may also be interested in subpixel rendering.

Here's a blog comparing subpixel rendering in chrome and firefox. This is an older article about Firefox's font rendering.

这篇关于使用webkit变换奇怪的单词在chrome中旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！