为啥我的字体在 IE9 中看起来好多了？

Posted 2023-03-06

【中文标题】为啥我的字体在 IE9 中看起来好多了？

【英文标题】：Why does my font look much better in IE9?为什么我的字体在 IE9 中看起来好多了？

【发布时间】：2011-08-13 06:01:57

【问题描述】：

我将font-family: Myriad; font-size: 40px 用于某些文本。我不敢相信 IE 以最好的质量显示字体！比 Opera、Firefox 和 Chrome 好多了。

怎么可能？如何使文本在其他浏览器中看起来像在 IE 中一样好？

这是一个演示：

http://jsfiddle.net/55Ruh/3/

在所有浏览器中尝试此链接。 IE（最新版本，9）显示最好和最优质的文本，不是吗？

【参考方案1】：

简单地说：这是因为 IE9 引入了 a new font rendering engine，它主要基于 WPF's ClearType implementation 中的内容。其增强的引擎在减少锯齿边缘方面做得更好，使字体看起来更平滑更好，尤其是在大尺寸下。

深入细节——我的意思是真正技术化——这种 ClearType 品种不同于在 Windows 的其余部分中看到的，也称为 GDI ClearType（用于 Windows 的 GDI 图形图书馆）。旧的 GDI ClearType 是大多数其他浏览器的 Windows 版本基于其字体渲染引擎的一种，这也是使字体在大尺寸下看起来非常锯齿的一种。

第二个链接的以下段落总结了它的大部分内容，很好地解释了为什么字体在 IE9 的新引擎中看起来更平滑：

与以前版本的 ClearType 相比，一个显着的改进是使用了亚像素定位。与 GDI 中的 ClearType 实现不同，Windows Presentation Foundation (WPF) 中的 ClearType 允许字形在像素内开始，而不仅仅是像素的开始边界。由于定位字形的这种额外分辨率，字形的间距和比例更加精确和一致。

请特别参阅Y-direction anti-aliasing 部分的屏幕截图以进行比较。另一个引用：

Windows Presentation Foundation (WPF) 中的 ClearType 在 y 方向级别提供抗锯齿，以平滑任何锯齿状边缘。

【讨论】：

只是一个注释；大多数字体根本不是为屏幕设计的，而是为了在压力下将墨水放在纸上。

【参考方案2】：

要“在其他浏览器中让文字像在 IE 中一样漂亮”，你可以试试text-shadow。

text-shadow:0 0 1px #eee;

现场演示： http://jsfiddle.net/simevidas/55Ruh/5/

【讨论】：

请谨慎使用。有些网站到处都在使用它（body），这很烦人。非常适合 H1 和 H2。

也许这是 IE 缺乏text-shadow 支持的一件好事。或者他们可能故意避开text-shadow，只是因为他们知道它会被用于此目的。 顿悟！（不是浏览器）