用CSS3转换，jQuery和& Google字体 [英] Problem with poor font rendering with CSS3 transitions, jQuery, & Google Fonts

问题描述

在Firefox中，没有问题。这是一张图片：

http://cl.ly/3R0L1q3P1r11040e3T1i p>

在Safari中，文字渲染效果不佳：

http://cl.ly/0a1101341r2E1D2d1W46

在IE7& IE8，它更糟糕，但我没有一张照片。对不起：

我使用的是Isotope jQuery插件，而CSS3转换似乎会导致可怜的字体呈现。

我也在使用Google Font API。
$ b 以下是Isotope的CSS转换过程：

  / ****同位素CSS3过渡**** / 
 
。同位素，
。同位素.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; 
} 
 $ b $ .bot .isotope-item {
 -webkit-transition-property：-webkit-transform，opacity; 
 -moz-transition-property：-moz-transform，opacity ; 
 transition-property：transform，opacity; 
} 
  

帮助这个。看起来很棒的Firefox！

谢谢！

  .isotope .isotope-item {
 -webkit-transition-property：-webkit-transform，不透明度; 
 -moz-transition-property：-moz-transform，不透明度; 
 transition-property：transform，opacity; 
 -webkit-font-smoothing：antialiased 
} 
  

原因似乎是与支持3D转换有关。同位素使用Modernizr自动检测对3d转换的支持，并使用translate3d而不是translate。我真正想要的是：

$ p $ -webkit-font-smoothing：subpixel-antialiased


但是，这似乎只能在Chrome中运行，并使Safari恢复到之前的状态。要清楚的是，Chrome并没有表现出消除锯齿的问题，但确实遵守了上面的样式定义。

我正在考虑修改同位素来源，将此字体平滑定义添加到支持3D转换（即Safari）的浏览器，并将Chrome单独保存。

In Firefox, there is no problem. Here's an image:

http://cl.ly/3R0L1q3P1r11040e3T1i

In Safari, the text is rendering poorly:

http://cl.ly/0a1101341r2E1D2d1W46

In IE7 & IE8, it's much worse, but I don't have a picture. Sorry :(

I'm using Isotope jQuery plugin, and the CSS3 transitions seem to cause the poor font-rendering.

I'm also using Google Font API.

Here's what the CSS transitions for Isotope are written as:

/**** 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;
}

I appreciate any help with this. Looks great in Firefox!

Thanks!

解决方案

Forgetting IE for a minute, you can add the -webkit-font-smoothing property to the .isotope-item style definition. Like this:

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

The reason seems to have something to do with supporting 3d transitions. Isotope automatically detects support for 3d transitions using Modernizr and uses "translate3d" instead of "translate". What I really want is:

-webkit-font-smoothing: subpixel-antialiased

But that only seems to work in Chrome and puts Safari back the way it looked before. To be clear, Chrome doesn't exhibit the anti-aliasing problem but does respect the style definitions above.

I'm considering modifying the source of isotope so that it only adds this font smoothing definition to browsers supporting 3D transforms (ie. Safari) and leaves Chrome alone.

这篇关于用CSS3转换，jQuery和& Google字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！