CSS3 过渡、jQuery 等字体渲染效果不佳的问题谷歌字体

发布于 2024-10-19 15:07:30 字数 941 浏览 3 评论 0原文

在火狐中，没有问题。这是一个图像：

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

我感谢任何有关此问题的帮助在火狐浏览器中看起来很棒

！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橘味果▽酱 2024-10-26 15:07:30

暂时忘记 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 不会出现抗锯齿问题，但确实尊重上面的样式定义。

我正在考虑修改 isotope 的来源，以便它只将字体平滑定义添加到支持 3D 转换的浏览器（即 Safari），而只保留 Chrome。

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.

回复收藏 0 原文