使用jQuery动画CSS不透明度淡化和@ font-face为Internet Explorer提供了非常丑陋的字体渲染？
我正在开发一个HTML / CSS / jQuery网站，试图像Flash网站一样。 我不得不使用@ font-face来获得所需的字体。 客户端也希望淡入文本和内容（因此它看起来像Flash文件）。 问题是，在Internet Explorer中，字体看起来是锯齿状和丑陋的。
我的字体CSS的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）应用于文本渐变的元素，但这似乎仍然没有做任何事情。
一定有这个问题吗？ 除了这个小字体问题，该网站是完整的！
正如其他答案中所提到的，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 ）
我有同样的问题，如果我淡入元素，字体看起来都是锯齿状的。 我尝试设置背景，发现如果我设置不透明背景（如#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);
我有这个问题，在元素上明确设置背景颜色来解决问题。
此链接描述了该问题
IE不能正确支持opcity 。 在这里阅读更多JQuery IE
我也在努力解决cleartype / opacity问题。 我发现如果我想要淡化的元素具有纯色背景设置（css background-color属性），则文本将在淡入淡出期间和之后正确呈现。 因此，如果您不需要文本的透明背景，则可以使用此解决方法。 Testet仅在IE7中出现。
在等待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') } }
是的它在IE中是不透明的。 在幕后，jQ使用activeX控件来模拟这个，但是当元素被动画化时，它与透明的png和类型一起使用时会引发疯狂的事情。