jquery - 使用 jQuery animate CSS opacity fade 和 @font-face 给 Internet Explorer 带来非常难看的字体渲染？

Question

我正在使用 HTML/CSS/jQuery 开发一个试图表现得像 Flash 网站的网站。我不得不使用@font-face 来获得所需的字体。客户也希望文本和内容淡入(所以它看起来像 Flash 文件)。问题是，该字体在 Internet Explorer 中看起来参差不齐且难看。

我的字体 CSS 如下所示:

@font-face {
font-family: 'SansumiRegular';
src: url('../fonts/Sansumi-Bold.eot');
src: local('Sansumi Regular'), local('Sansumi-Bold'), url('../fonts/Sansumi-Bold.ttf') format('truetype');}

...生成自:http://www.fontsquirrel.com/fontface/generator

淡入淡出的 jQuery 是这样的:

$('#site').css({opacity: '0.0'});
... preloads the images with jQuery, and at callback do fade...
$('#site').animate({opacity: '1.0'}, 1000);

基本上，没有办法解决我需要使用特定字体(不是标准网络字体)并且我必须使用某种淡入淡出技术才能使其“看起来像 Flash 文件”的事实。

这一切在 Firefox、Safari、Chrome 中看起来都很棒......但在 IE 中它看起来很垃圾 - 所有内容参差不齐且几乎不可读。环顾四周后，我发现了这个 jQuery 插件，用于处理 IE 中的 ClearType 问题:http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

...但我有一种感觉，正是这种淡入淡出导致了字体问题。也许是因为 IE 并不真正支持 opacity CSS 命令？ ...但它确实会在所有 IE 中消失？!我什至尝试了一种相对不为人知的技术，将不透明的背景颜色(如#FFFFFF)应用于文本逐渐淡化的元素，但这似乎仍然没有任何作用。

一定有绕过这个问题吧？除了这个小字体问题，该站点已完成!

Answer 1

正如其他答案中提到的，jQuery 使用 IE-only CSS 属性 filter 在 Internet Explorer 中实现不透明度。使用此属性会导致文本呈现问题。

如果您在动画完成时移除 CSS filter，那么文本上的抗锯齿将恢复:

$('#site').animate({opacity: '1.0'}, 1000, function() {
  $(this).css('filter', 'none');
});

在动画进行时，它仍然会看起来有锯齿，但如果动画很快，它可能不会很明显。

(这是一个已知的 jQuery 错误，此后已修复:http://dev.jquery.com/ticket/6652)