字体系列在具有 jQuery 动画的资源管理器中呈现不佳
我在我的 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 动画将其向下滑动并显示它时，它才会保持锯齿状和锯齿状。丑陋的。
我有更好的方法来做到这一点吗？也许应该将不同的衬线字体添加到我的系列中，以便在包括资源管理器在内的所有浏览器中正确呈现。
谢谢你！
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
是的，问题在于不透明度。 IE 处理不透明度的方式是通过其 dxfilters 胡说八道，并且在执行此操作时会禁用字体抗锯齿功能。
您可能可以通过这样做来修复它：
例如，在动画完成后，取消设置不透明度CSS规则，并希望IE重置为“默认”渲染。如果这不起作用，请尝试将整个 div 替换为未设置不透明度的新副本。
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:
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.