使用jQuery动画CSS不透明度淡化和@ font-face为Internet Explorer提供了非常难看的字体渲染？

Question

我正在开发一个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)应用于文本渐变的元素,但这似乎仍然没有做任何事情.

一定有这个问题吗？除了这个小字体问题,该网站是完整的!

Answer 1

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

如果filter在动画完成后删除CSS ,则将恢复文本上的消除锯齿:

$('#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

IE 不能opcity正常支持。在这里阅读更多JQuery IE <div> 不透明度问题和这里jquery IE Fadein 和 Fadeout Opacity以及这里http://icant.co.uk/sandbox/msieopacityissue/