jquery - 使用 jQuery fadeIn 的字体抗锯齿

Question

现在，当鼠标悬停在不同的 div 上时，我会发生多个 fadeIn() 和 fadeOut() 事件。在 fadeIn 事件完成之前，div 中淡入淡出的文本看起来真的像素化了，然后它有点“弹出”成看起来更平滑的文本。

我想知道是否可以告诉 div 在实际淡入之前平滑字体，或者我只能通过使 div 成为图像来实现这种效果吗？

查看悬停在 http://www.daemondeveloper.com 处的维恩图

Answer 1

这曾经是一个更广泛的问题，但它仍然是 IE 的问题。您可以采取一些措施来解决此问题。首先，确保你的淡入淡出元素有背景。

更大的问题是 IE 如何通过其不透明过滤器呈现文本。除了明显的抗锯齿之外，字母形状实际上也可以发生很大变化。一种解决方案是将 IE 的不透明度过滤器预先应用到 99% 的元素。这本质上是不透明的，但它确保元素在 jQuery 效果期间呈现一致。

以 Ivan 的 jsfiddle 为基础，这个演示了背景对淡入淡出文本的影响(在 IE8 中测试):http://jsfiddle.net/joemaller/WLjXW/

关键是像这样的 css 规则:

#sometext {
  background: #fff;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
  filter: alpha(opacity=99);
}

类似问题:ie problem with fading in text
有关 IE 不透明度规则的更多信息:http://www.quirksmode.org/css/opacity.html