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

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

http://cl.ly/3R0L1q3P1r11040e3T1i

В Safari текст отображается плохо:

http://cl.ly/0a1101341r2E1D2d1W46

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

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

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

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

/**** 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!

Спасибо!


fonts internet-explorer antialiasing jquery-isotope
person Justin    schedule 27.02.2011    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Забыв на минуту об 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-переходов. Isotope автоматически определяет поддержку 3D-переходов с помощью Modernizr и использует «translate3d» вместо «translate». Чего я действительно хочу, так это:

-webkit-font-smoothing: subpixel-antialiased

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

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

person Thom Mahoney    schedule 25.03.2011

arrow_upward
0
arrow_downward

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

person kayluhb    schedule 27.02.2011