Поворот CSS3 -Проблемы с отображением в Firefox и Safari

Я пытаюсь повернуть простую строку текста на несколько градусов с помощью свойства CSS3 »rotate«, ровно на 1,5 градуса.

  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);

Результат в Chrome (v18 )выглядит нормально, в Firefox (v10 )и Safari (5.1.5 ), однако я получаю ужасные результаты.

Я использую шрифт, реализованный с помощью @font -face, но с Arial у меня все еще возникают проблемы (по крайней мере в Firefox ). См. примеры ниже.

Что действительно странно, так это то, что переключение на системный шрифт (Arial )в Safari решает проблему, в то время как в Firefox проблема остается.

Мы будем очень признательны за любую помощь, обходной путь или взлом.

1 )Chrome 18 / шрифт -семейство :Calibri / выравнивание OK

2 )Firefox 10 / шрифт -семейство :Calibri / выравнивание уродливое

3 )Firefox 10 / шрифт -семейство :Arial / выравнивание все еще уродливое

4 )Safari 5.1.5 / шрифт -семейство :Calibri / выравнивание уродливое

5 )Safari 5.1.5/шрифт -семейство :Arial/выравнивание OK

До сих пор я нашел следующие темы, но ни один из них не дает объяснения, как решить проблему:

https://bugzilla.mozilla.org/show_bug.cgi?id=403447

Ошибки CSS3 -Проблемы при использовании преобразования :правил поворота (Safari + Firefox)

Преобразование CSS Поворот букв

У меня также попытался установить переменные DirectWrite (для изменения рендеринга шрифта ), как описано в этом руководстве :http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/, но результаты те же.

11
задан Community 23 May 2017 в 12:30
поделиться