使用jQuery动画在资源管理器中使用Font-family渲染效果不佳 [英] Font-family renders poorly in Explorer with jQuery animation
问题描述
我在我的CSS中使用它...
I'm using this in my css...
.myclass { font-size: 16px; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; }
除了资源管理器，它在所有浏览器中都呈现出漂亮和流畅的效果。 （我只在XP SP2上的IE8中测试过）
It renders nice and smooth in all browsers except for Explorer. (I've only tested in IE8 on XP SP2)
在资源管理器中，它看起来很恐怖！根本没有字体平滑。
In Explorer, it looks horrific! No font smoothing at all.
然而，这只是以display：none;开头的DIV块上的问题。并使用jQuery显示...
However, it's only a problem on DIV blocks that start with a "display:none;" and are revealed with jQuery...
<html>
<div id="messageBox" style="display:none;">
<div id="message" class="myClass"></div>
</div>
</html>
<script>
function message(msg) {
$("#messageBox").slideDown('slow');
$("#message").html(msg).animate({opacity: 1},500);
};
</script>
当我在其旁边放置一个包含相同内容且具有相同样式的重复DIV时，字体渲染完全没问题。只有当我使用jQuery动画向下滑动它并显示它仍然是锯齿状的时候。丑陋。
When I put a duplicate DIV right next to it containing the same content with the same style, the font renders perfectly fine. It's only when I use the jQuery animation to slide it down and reveal it that it stays jagged & ugly.
我有更好的方法吗？也许应该在我的家庭中添加一个不同的衬线字体，它将在包括资源管理器在内的所有浏览器中正确呈现。
Is there a better way for me to be doing this? Perhaps a different serif font should be added to my family that will render properly in all browsers including Explorer.
谢谢你！
推荐答案
是的，问题在于不透明度。 IE执行不透明的方式是使用dxfilters废话，并且它会禁用字体抗锯齿。
Yes, the issue is the opacity. The way IE does opacity is with its dxfilters nonsense, and it disables font antialiasing while it does so.
你可能能够修复它通过这样做：
You might be able to fix it by doing this:
$("#message").html(msg).animate({opacity: 1},500, function()
{
$(this).css('opacity', '');
});
例如，在动画结束后，取消设置不透明度css规则，并希望IE重置为默认渲染。如果这不起作用，请尝试使用没有设置不透明度的新副本替换整个div。
Eg, after the animation finishes, unset the opacity css rule, and hope IE resets to "default" rendering. If that doesn't work, try replacing the entire div with a fresh copy that doesn't have opacity set.
这篇关于使用jQuery动画在资源管理器中使用Font-family渲染效果不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
