IE9：Arial 渲染错误（加粗）答案

【问题标题】：IE9: wrong rendering of Arial (bolder)IE9：Arial 渲染错误（加粗）
【发布时间】：2012-04-24 16:49:09
【问题描述】：

我已经在 Chrome、FF 和 IE8 中测试了我的页面，所有浏览器都以这种方式呈现文本：

定义如下：

font-family: 'Arial', sans-serif;
font-size: 0.75em;  
font-weight: bold;

我尝试过以不同的方式声明 Arial，使用 px 而不是 em，并且还定义了数字的权重（600、800）...但是 IE9 的渲染仍然比其他浏览器“更大胆”：

有什么帮助吗？谢谢

【问题讨论】：

【解决方案1】：

IE 通常会让我头疼。我要做的是使用条件 CSS 并从 IE css 中删除粗体

<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->

然后这样定义

font-family: 'Arial', sans-serif;
font-size: 0.75em;

【讨论】：

【解决方案2】：

这个问题之前在 StackOverflow 上已经answered。这是一个浏览器问题，IE9 呈现不同的字体。它使用一种称为 DirectWrite 的 ClearType 技术。

在我个人看来，这不是什么大问题。网站永远不会在每个浏览器中看起来都完全相似。如果它真的困扰你，可以添加 IE-Hacks（例如强制浏览器使用 IE8 渲染），但我不推荐它。

【讨论】：

【解决方案3】：

我不小心在 body 标签上设置了font-weight:bold 时遇到了这个问题。出于某种原因，IE9 使我所有的 Arial 文本都比其他浏览器更粗。

【讨论】：

【解决方案4】：

只是为了权衡一下，您可以在 HTML 中放置一个元标记作为一种快速解决方法，它会告诉 IE9 模拟 IE8，恢复原始呈现。

为此，请将<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 放在您的部分中。

但这会以牺牲您可能需要的其他 IE9 功能为代价，例如更好的 HTML5 和 CSS3 支持。

【讨论】：

【解决方案5】：

您可能有不同的问题，因为您说您尝试了 600 的权重，但通常，当您告诉 IE 9 将 Arial 呈现为粗体时，您最终看到的不是 Arial，而是Arial Black。对于800 和900 中的font-weights，将发生此切换。

要在 IE 9 中使用粗体 Arial 而不切换到 Arial Black，请使用...

font-family: Arial, sans-serif;
font-size: 0.75em;  
font-weight: 700;

这也应该解决 Firefox 中的相同问题。

【讨论】：

我的天哪——这个让我难过。我不明白为什么 IE 中的字体要宽得多......为什么他们会这样做我不明白......如果我想要 Arial Black，我可以要求它！浏览器是否决定进行其他字体切换？
@Mark 是的，我在这个答案中详细说明了一点：stackoverflow.com/a/12184181/3283。 IE 似乎也有一些硬编码的组合。顺便说一句，由于 Chrome 从 GDI 切换到 DirectWrite 以在 Windows 上进行字体渲染，我不得不（暂时）放弃使用 Arial Black，因为 Windows 的奇怪之处可以追溯到 Windows XP Service Pack，这会导致Arial Black 被渲染为 Arial Black 斜体。在 Windows 8.1 中仍然存在问题。