为什么我的字体在 IE9 中看起来更好?
我使用 font-family: Myriad;某些文本的字体大小:40px。我不敢相信 IE 能以最好的质量显示字体!比 Opera、Firefox 和 Chrome 好得多。
怎么可能呢?如何使文本在其他浏览器中看起来像在 IE 中一样好?
这是一个演示:
尝试此链接所有浏览器。 IE(最新版本,9)显示最好、最高质量的文本,不是吗?
I use font-family: Myriad; font-size: 40px
for some text. I can't believe IE displays the font in the best quality! Much better than Opera, Firefox and Chrome.
How can it be? How can I make text look as good in other browsers as in IE?
Here is a demo:
Try this link in all browsers. IE (the newest version, 9) shows the best and most quality text, doesn't it?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
简单地说:这是因为 IE9 引入了 一个新的字体渲染引擎,主要基于WPF 的 ClearType 实现。其增强的引擎在减少锯齿状边缘方面做得更好,使字体看起来更平滑、更好,尤其是在大尺寸时。
深入了解细节 — 我的意思是真正了解技术 — 这种 ClearType 与 Windows 其余部分中看到的 ClearType 不同,也称为 GDI ClearType(用于 Windows 的 GDI 图形库)。旧的 GDI ClearType 是大多数其他浏览器的 Windows 版本的字体渲染引擎的基础,这也是使大尺寸字体看起来非常锯齿的一种。
第二个链接中的以下段落总结了其余大部分内容,这很好地解释了为什么字体在 IE9 的新引擎中看起来更平滑:
请特别参阅Y 方向抗锯齿 与屏幕截图进行比较。另一句话:
Simply put: this is because IE9 introduces a new font rendering engine that is based largely on that seen in WPF's ClearType implementation. Its enhanced engine does a better job at reducing jagged edges, making fonts look smoother and better, especially at large sizes.
Getting into the details — and I mean to get really technical — this breed of ClearType is different from the one seen in the rest of Windows, also known as GDI ClearType (for Windows' GDI graphics library). The old GDI ClearType is the one that Windows versions of most other browsers base their font rendering engines off, which is also the one that makes fonts look really jaggy in large sizes.
The following paragraph from the second link summarizes most of the rest of its content, that explains quite nicely why fonts look smoother in IE9's new engine:
See, especially, the section on Y-direction anti-aliasing with screenshots for comparison. Another quote:
要“让文本在其他浏览器中像 IE 一样漂亮”,您可以尝试
text-shadow
。现场演示: http://jsfiddle.net/simevidas/55Ruh/5/
To "make text so nice as in IE in other browsers", you could try
text-shadow
.Live demo: http://jsfiddle.net/simevidas/55Ruh/5/