使用 CSS3 过渡、jQuery 和 Google 字体呈现不良字体的问题答案

【问题标题】：Problem with poor font rendering with CSS3 transitions, jQuery, & Google Fonts使用 CSS3 过渡、jQuery 和 Google 字体呈现不良字体的问题
【发布时间】：2011-02-27 23:05:08
【问题描述】：

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

http://cl.ly/3R0L1q3P1r11040e3T1i

在 Safari 中，文本呈现不佳：

http://cl.ly/0a1101341r2E1D2d1W46

在 IE7 和 IE8 中，情况要糟糕得多，但我没有图片。对不起:(

我正在使用 Isotope jQuery 插件，CSS3 过渡似乎导致字体渲染不佳。

我也在使用 Google Font API。

Isotope 的 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 中看起来很棒！

谢谢！

【问题讨论】：

标签： internet-explorer fonts jquery-isotope antialiasing

【解决方案1】：

暂时忘记 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 使用 Modernizr 自动检测对 3d 过渡的支持，并使用“translate3d”而不是“translate”。我真正想要的是：

-webkit-font-smoothing: subpixel-antialiased

但这似乎只在 Chrome 中有效，并使 Safari 恢复到以前的样子。需要明确的是，Chrome 没有出现抗锯齿问题，但确实尊重上述样式定义。

我正在考虑修改同位素的来源，以便它只将这个字体平滑定义添加到支持 3D 转换的浏览器（即 Safari）中，而让 Chrome 单独使用。

【讨论】：

【解决方案2】：

不幸的是，您真的无能为力。它与 IE 用来创建不透明度的 alpha 过滤器有关，我从未见过修复它的方法。

【讨论】：