Странные слова, использующие преобразование webkit rotate in 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 некоторые изслова выглядят искаженными / нечеткими.2 конкретных слова, которые выглядят «странными»: Контакт и Портфолио.Почему некоторые слова могут быть испорчены, но все остальные в порядке?

Я думал, что в конце слова была круглая буква (c, o, q и т. Д.), Поэтому я провел небольшое тестирование (отнюдь не исчерпывающее), я изменил портфолио на:Portfolix и Portfoliw, которые были в порядке, но если бы я попробовал Portfoliq, Protfolie или Portfolit, то он исказился.

Есть идеи относительно того, почему это происходит, и какие-либо способы исправить это?

Answer 1

Chrome использует Windows GDI для рисования текста в Windows. Я предполагаю, что для поворота он будет рисовать горизонтальный текст в растровое изображение в памяти, а затем повернуть его и отобразить на экране. Может быть проблема с сохранением сглаживания шрифта или, возможно, подсказка шрифта выполняется при условии горизонтальной ориентации, а затем применяется преобразование; что приводит к искажению пикселей. Вас также может заинтересовать рендеринг субпикселей .

Вот блог , сравнивающий субпиксельный рендеринг в Chrome и Firefox. - старая статья о рендеринге шрифтов в Firefox.