Font-family renders poorly in Explorer with jQuery

2019-09-17 00:03发布

问题:

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>
    <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>

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!

回答1:

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.