使用 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 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);

基本上，没有办法绕过这样的事实：我需要使用特定的字体（不是标准的 Web 字体）并且我必须使用某种淡入淡出技术，使其“看起来像 Flash 文件”。

这一切在 Firefox、Safari、Chrome 中看起来都很棒……但在 IE 中看起来很垃圾——全是锯齿状的，几乎不可读。环顾四周后，我发现这个 jQuery 插件旨在处理 IE 中的 ClearType 问题： http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

...但我有一个感觉正是这种淡入淡出导致了字体问题。也许是因为 IE 并不真正支持不透明度 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）

Answer 2

我遇到了同样的问题，如果我淡入元素，字体看起来都是锯齿状的。我尝试设置背景，发现如果我设置不透明背景（如#fff）并使用 jQuery.css() 将不透明度设置为 0，它就可以工作。如果我只在样式表中将不透明度设置为 0，则不起作用。我使用 fadeTo 而不是 Animate。

这对我来说适用于 IE8，但我还没有尝试过 IE7。

在样式表中尝试这个：

.fader {
background: none repeat scroll 0 0 #fff;
opacity: 0;
}

在 JS 中尝试这个：

$('.fader').css('opacity', '0').fadeTo(300, 1);

Answer 3

我遇到了这个问题，在元素上显式设置背景颜色解决了问题。

此链接描述了该问题

Answer 4

IE 无法正确支持 opcity。在这里阅读更多信息 JQuery IE

;不透明度问题和这里jquery IE淡入和淡出不透明度和这里http://icant.co.uk/sandbox/msieopacityissue/

Answer 5

我也遇到了cleartype/不透明度问题。我发现，如果我想要淡入淡出的元素设置了纯色背景（css背景颜色属性），则文本将在淡入淡出期间和之后正确呈现。因此，如果您不需要文本的透明背景，可以使用此解决方法。仅在 IE7 中进行测试。

Answer 6

在等待 jQuery 的未来版本时，在脚本之前添加此内容可确保 jQuery 删除任何不透明动画末尾的过滤器属性。 （通过http://dev.jquery.com/ticket/6652）

这清除了丑陋的字体为我。

if ($.cssHooks.opacity.set) {
  $.cssHooks.opacity.defaultSet = $.cssHooks.opacity.set
  $.cssHooks.opacity.set = function(elem, value) {
    $.cssHooks.opacity.defaultSet(elem, value)
    if (!elem.style.filter.replace(/\ *(alpha\(opacity=100\))?/, ''))
      elem.style.removeAttribute('filter')
  }
}

Answer 7

是的，它是 IE 中的 opactiy。 jQ 在幕后使用 activeX 控件来模拟这一点，但是当与透明 png 和元素动画时放置在其上的类型结合使用时，会导致疯狂的事情。