使用 jQuery fadeIn 进行字体抗锯齿

【问题标题】：Font Anti-Aliasing with jQuery fadeIn使用 jQuery fadeIn 进行字体抗锯齿
【发布时间】：2012-07-13 04:49:28
【问题描述】：

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

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

【问题讨论】：

标签： jquery css

【解决方案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);
}

【讨论】：