Я пытаюсь повернуть простую строку текста на несколько градусов с помощью свойства 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/, но результаты те же.