使用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?

问题描述

我正在使用HTML / CSS / jQuery的网站，试图作为一个Flash网站。我不得不使用@ font-face来获得所需的字体工作。客户端也希望文本和内容的淡入（因此它看起来像Flash文件）。问题是，在Internet Explorer中，字体的外观看起来很丑陋和丑陋。

I'm working on a site with HTML/CSS/jQuery that is trying to act like a Flash site. I've had to use @font-face to get the desired font to work. The client wants the fade in of text and content too (so it looks like the Flash file). The problem is, the font's look jagged and ugly in Internet Explorer.

我的CSS字体面貌如下：

My CSS for the font face looks like this:

@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 for the fade in stuff is like这是：

The jQuery for the fade in stuff is like this:

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

基本上，没有办法解决我需要使用特定字体字体），我必须使用某种淡入淡出的技术，看起来像Flash文件。

Basically, there is no way around the fact that I need to use that particular font (not standard web font) and I have to use some sort of fade technique for it to 'look like the Flash file'.

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

This all looks great in Firefox, Safari, Chrome... But in IE it looks rubbish - all jagged and hardly unreadable. After looking around, I found this jQuery plugin that is meant to deal with ClearType issues in IE: http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

...但我有一种感觉，这是褪色导致的字体的问题。也许这是事实，IE不真正支持不透明CSS命令？ ...但它会褪色的一个所有的IE？我甚至尝试了一个相对未知的技术，应用不透明的背景颜色（如#FFFFFF）的元素与文字中的淡化，但这似乎并没有做任何事情。

...but I have a feeling it's this fade in that's causing the problem with the fonts. Maybe it's the fact that IE doesn't really support the opacity CSS command? ...but it does fade in fine one all IEs?! I've even tried a relatively unknown technique of applying a opaque background color (like #FFFFFF) to the elements with the text in that fades, but this still doesn't seem to do anything.

这个问题一定存在吗？除了这个小字体问题，网站完成！

There must be away around this problem? Apart from this small font issue, the site is complete!

推荐答案

如在其他答案中提到的，jQuery使用IE-属性过滤器用于Internet Explorer中的不透明度。

As mentioned in other answers, jQuery uses the IE-only CSS property filter for opacity in Internet Explorer. It is the use of this property that causes the text rendering problems.

如果你删除CSS 过滤器动画完成后，文本上的抗锯齿将恢复：

If you remove the CSS filter when your animation is complete then the anti-aliasing on the text will be restored:

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

动画正在进行时，它仍然会显示锯齿状，但如果动画

It will still look jagged while the animation is in progress, but it may not be noticeable if the animation is quick.

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

(This was a known jQuery bug and has since been fixed: http://dev.jquery.com/ticket/6652)

这篇关于使用jQuery animate CSS opacity fade和@ font-face给Internet Explorer非常丑陋的字体呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！