Font-family renders poorly in Explorer with jQuery animation_问答_开发者

Font-family renders poorly in Explorer with jQuery animation

开发者 https://www.devze.com 2023-02-19 19:02 出处：网络

I\'m using this in my css... .myclass { font-size: 16px; font-style: italic; font-family: Georgia, \"Times New Roman\", Times, serif; }

I'm using this in my css...

.myclass { font-size: 16px; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; }

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.

However, it's only a problem on DIV blocks that start with a "display:none;" and are revealed with jQuery...

<html>
    <di开发者_如何学运维v 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>

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.

Thank-you!

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', '');
});

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.