Вопрос по rotation, css3, firefox, transform – CSS3 rotate - проблемы с рендерингом в Firefox и Safari

11

Я пытаюсь повернуть простую строку текста на несколько градусов с помощью свойства CSS3 & # xBB; rotate & # xAB ;, точно на 1,5 градуса.

<code>  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);
</code>

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

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

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

Любая помощь, обходной путь или взлом будет принята с благодарностью.

1) Chrome 18 / font-family: Calibri / alignment OK

2) Firefox 10 / font-family: Calibri / alignment ugly

3) Firefox 10 / font-family: Arial / alignment still ugly

4) Safari 5.1.5 / font-family: Calibri / alignment ugly

5) Safari 5.1.5 / font-family: Arial / alignment OK

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

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

CSS3 Bugs - Проблемы при использовании transform: rotate rules (Safari + Firefox)

CSS Transform Повернуть выравнивание букв

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

Ваш Ответ

1   ответ
1

Это не то, что вы можете исправить, из отчета об ошибке и других битов, похоже, что производители браузеров знают об этих проблемах ... но я бы не стал долго ждать постоянного исправления.

Может быть, попробуйте поместить текст в свой собственный контейнер div и повернуть его вместо текста напрямую?

Но ИМХО, если вам это нужно для работы на производственном сайте, замените текст на изображение. Пользователи используют браузеры, которые не поддерживают новый материал CSS3, поэтому, если это важно, либо не используйте его, либо убедитесь, что он хорошо деградирует (функционирует на всех платформах, но может потерять некоторую часть), то есть отключите поворот текста на браузеры, которые выглядят некрасиво.

«Пользователи используют браузеры, которые не поддерживают новый CSS3». - Массовое обобщение и по большей части неверно

Похожие вопросы