8

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

http://cl.ly/3R0L1q3P1r11040e3T1i

在 Safari 中，文本呈现不佳：

http://cl.ly/0a1101341r2E1D2d1W46

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

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

我也在使用谷歌字体 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 中看起来很棒！

谢谢！

4

2 回答 2

4

暂时忘记 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 独自一人。

于 2011-03-25T01:02:30.220 回答
0

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

于 2011-02-27T23:22:07.417 回答