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

Във Firefox няма проблем. Ето едно изображение:

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 не проявява проблема с изглаждането, но спазва дефинициите на стила по-горе.

Обмислям да модифицирам източника на изотоп, така че да добавя само тази дефиниция за изглаждане на шрифта към браузъри, поддържащи 3D трансформации (т.е. Safari) и да остави Chrome сам.

person Thom Mahoney    schedule 25.03.2011

arrow_upward
0
arrow_downward

За съжаление, всъщност не можете да направите нищо. Това е свързано с алфа филтрите, които IE използва за създаване на непрозрачност и никога не съм виждал поправка за това.

person kayluhb    schedule 27.02.2011