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

Posted 2023-03-06

【中文标题】使用 jQuery animate CSS opacity fade 和 @font-face 给 Internet Explorer 带来非常难看的字体渲染？

【英文标题】：Using jQuery animate CSS opacity fade and @font-face gives Internet Explorer very ugly font rendering?

【发布时间】：2011-01-06 22:35:55

【问题描述】：

我正在开发一个使用 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）应用到文本褪色的元素，但这似乎仍然没有任何作用。

这个问题一定要绕开吗？除了这个小字体问题，网站就完整了！

【问题讨论】：

更新：淡入不是问题。问题在于 IE 7 和 8 如何使用@font-face 显示字体。我已经尝试了我的问题链接中解释的技术，但这仍然没有做到。字体在 IE6 中显示良好，而不是 IE7 和 IE8，这让我相信这是它们显示字体的方式。与淡入淡出问题无关...有人有什么想法吗？

【参考方案1】：

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

如果您在动画完成后删除 CSS filter，则文本上的抗锯齿将恢复：

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

在动画进行时，它仍然会看起来参差不齐，但如果动画很快，它可能不会被注意到。

（这是一个已知的 jQuery 错误，现已修复：http://dev.jquery.com/ticket/6652）

【参考方案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);

【讨论】：

真实故事。添加背景颜色可以解决此问题。我使用 jquery 仅在浏览器为 IE8 或更低版本时应用背景颜色，这样它就不会在其他功能更强大的浏览器中破坏我的网站设计。

终于有人想通了。这是我会选择的答案。为我工作。此外，我所要做的就是通过 CSS 将背景应用到有问题的项目上——在我的例子中是一行更改。

这对我也有用。我需要做的就是将背景颜色添加到 css 样式中。但是，我无法继承或使背景透明，并希望文本平滑。我正在使用 Jquery 1.3.5 淡入淡出文本。这可能会在更高版本的 Jquery 中得到修复。 link

【参考方案3】：

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

This link describes the problem

【参考方案4】：

IE 不正确支持opcity。阅读更多这里JQuery IE <div> opacity problem和这里jquery IE Fadein and Fadeout Opacity和这里http://icant.co.uk/sandbox/msieopacityissue/

【参考方案5】：

我也为 cleartype / opacity 问题苦苦挣扎。我发现如果我要淡化的元素设置了纯色背景（css background-color 属性），则文本将在淡化期间和之后正确呈现。因此，如果您不需要文本的透明背景，则可以使用此解决方法。 Testet 仅在 IE7 中。

【参考方案6】：

在等待 jQuery 的未来版本时，在脚本之前添加它可以确保 jQuery 在任何不透明动画结束时删除 filter 属性。 （通过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')
  

【参考方案7】：

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