Question

我在我的CSS中使用它...

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

除了Explorer之外，它在所有浏览器中都呈现出漂亮和流畅的效果。（我只在XP SP2上的IE8中测试过）

在资源管理器中，它看起来很恐怖！根本没有字体平滑。

但是，对于以“display：none;”开头的DIV块，这只是一个问题。并用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动画向下滑动它并显示它仍然是锯齿状的时候。难看。

我有更好的方法来做这件事吗？也许应该在我的家庭中添加一个不同的serif字体，它将在包括Explorer在内的所有浏览器中正确呈现。

感谢 - 你！

Answer 1

是的，问题在于不透明度。 IE执行不透明度的方式是使用dxfilters废话，并且它会禁用字体抗锯齿。

你可能能够通过这样做来解决它：

$("#message").html(msg).animate({opacity: 1},500, function()
{
    $(this).css('opacity', '');
});

例如，在动画结束后，取消设置不透明度css规则，并希望IE重置为“默认”渲染。如果这不起作用，请尝试使用没有设置不透明度的新副本替换整个div。

在使用jQuery动画的资源管理器中，Font-family渲染效果不佳

1 个答案: