Проблема с плохим рендерингом шрифтов с переходами CSS3, jQuery и Google Fonts - PullRequest
Новая
       20

Проблема с плохим рендерингом шрифтов с переходами CSS3, jQuery и Google Fonts

8 голосов
/ 28 февраля 2011

В Firefox проблем нет. Вот изображение:

http://cl.ly/3R0L1q3P1r11040e3T1i

В Safari текст плохо рендерится:

http://cl.ly/0a1101341r2E1D2d1W46

В IE7 и IE8 все намного хуже, но у меня нет картинки. Извините :(

Я использую плагин Isotope jQuery, и переходы CSS3, кажется, вызывают плохую визуализацию шрифтов.

Я также использую Google Font API.

Вот как CSS-переходы для изотопа записываются так: 

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}

.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}

Я ценю любую помощь с этим. Отлично смотрится в Firefox!

Спасибо!

Ответы [ 2 ]

4 голосов
/ 25 марта 2011

Забыв IE на минуту, вы можете добавить свойство -webkit-font-smoothing к определению стиля .isotope-item. Как это: 

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
  -webkit-font-smoothing: antialiased
}

Причина, по-видимому, связана с поддержкой 3D-переходов. Изотоп автоматически определяет поддержку 3d-переходов с использованием Modernizr и использует «translate3d» вместо «translate». Что я действительно хочу, это: 

-webkit-font-smoothing: subpixel-antialiased

Но это только работает в Chrome и возвращает Safari к тому, как он выглядел раньше. Для ясности, в Chrome нет проблемы сглаживания, но соблюдаются приведенные выше определения стиля.

Я рассматриваю возможность изменения источника изотопа, чтобы он только добавил это определение сглаживания шрифтов в браузеры, поддерживающие 3D-преобразования (например, Safari), и оставил Chrome в покое.

0 голосов
/ 28 февраля 2011

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

...