为什么Internet Explorer 9比其他浏览器呈现Arial字体更加粗体？

Question

由于某种原因，IE9渲染Arial字体比其他浏览器（如IE7、IE8、Chrome和Firefox）要粗。我查看了CSS，但没有发现任何问题。

另一件事是，在我的网站上大多数地方都有1到2像素的单词间距，但IE9显示它太宽了，所以我做了条件CSS来设置正常的单词间距。

您可以在附加的屏幕截图中看到差异，并在此临时链接中找到它：http://pat.co.il/shirg/matanuziel.com/ 欢迎提出任何想法。 谢谢！

- Shir Gans

---

这个问题只出现在你的网站上，还是所有使用Arial字体的网站都有这个问题？ - Dan

好的观点。我尝试用一些浏览器查看cnn.com，但是所有的都看起来都一样。这就是为什么我认为它与我的网站有关。 - Shir Gans

是的，他们在IE 9中更改了呈现引擎，使用了与Firefox 4+相同的DirectWrite。我不喜欢它；它使文本看起来都模糊了。其他人似乎对此感到兴奋，比如整个DirectWrite团队。这不是你网站或CSS的问题，而是一个影响力很大的开发人员群体的眼睛问题。 - Cody Gray

但是我应该补充一点，我认为你不应该尝试“修复”它。使用IE 9和其他采用DirectWrite作为其文本呈现引擎的浏览器的人们已经习惯了这种行为-因为他们的所有其他网页都以相同的方式呈现。而且，既然每个人都知道网页不需要在所有浏览器中完全相同，那么让您的文本以浏览器想要呈现的方式呈现会更容易，也更少痛苦。 - Cody Gray

@CodyGray 绝对是正确的。就像我之前提到的那样，这是一个微不足道的问题。感谢你的幸运星，你所关心的是这个问题，而不是更荒谬和棘手的事情。 - Josh Smith

Answer 1

问题出在浏览器，而不是你的网站。

Internet Explorer 9 使用子像素定位 ClearType 来使用 DirectWrite 渲染文本。这会导致与其他浏览器的渲染差异，并且这是预期的行为。它可能会导致文本稍微模糊，就像你所看到的那样。

---

作为一个附带说明，如果您想使用非标准字体并使它们在所有用户中呈现（合理地），则应考虑使用TypeKit。请注意，不同浏览器之间仍会存在轻微的渲染差异，可能与您在此处遇到的问题相同数量级。

正如Alan所说，使用normalize.css是个好主意。

- Josh Smith

---

你是否曾经为了满足在IE6中最佳运行的要求而开发CSS3功能的hack？ :/ - Fabián Heredia Montiel

@fabianhjr 没错。甚至更糟。 - Josh Smith

有没有类似 Cufon（我从未使用过）的解决方案？ - Shir Gans

@ShirGans 请看关于TypeKit的第三段。 - Josh Smith

Answer 2

值得一提的是，你可以看看normalize.css。我不确定它是否能解决你具体的问题，但我发现它是一个不错的起点。

- Alan W. Smith

---

谢谢。看起来是一个不错的起点。我添加了它进行检查，但对于字体问题没有帮助。如果没有任何帮助，我将尝试更深入地研究它。 - Shir Gans

@ShirGans 这并不是问题，事实证明如此。但仍然是一个好的建议。 - Josh Smith