有没有办法解决 IE10&9 更宽的字体渲染差异？答案

【问题标题】：is there a way to solve IE10&9 wider font rendering difference?有没有办法解决 IE10&9 更宽的字体渲染差异？
【发布时间】：2013-12-27 19:46:05
【问题描述】：

我在以 IE10 和 9 字体呈现 arial 时遇到问题；
在 IE7,8,Chrome,FF 上，它就像我在 dreamweaver 上看到的一样，
但是 IE10 和 9 的字体变宽了，让我的文字跳到了额外的一行。

Reset.css 或 normalize.css 都没有帮助。

截图：

这是我的代码：

<style type="text/css">
<!--
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: gray;
    margin-bottom: 0px;
    font-style: normal;
    font-weight: 300;
} 

#container {
    border: 1px solid #DCD7D4;
    width: 768px;
    min-height: 400px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
}
#left {
    float: left;
    width: 580px;
    min-height: 400px;
    background-color: #FBFBFB;
    color: #565656;
}

#margin {
    margin-bottom: 6px;
    margin-left: 18px;
    margin-right: 6px;
    margin-top: 11px;
}

.text {
    font-size: 15px;
    color: #565656;
    font-weight: 400;
    line-height: 21px;
    margin-top: 0px;
    margin-bottom: 2px;
}

-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<div id="container">
  <div id="left">
    <div id="margin">
      <p class="text">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
AAAA AAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA aaa aaaaaaaa</p>
    </div>
  </div>

  <br style="clear: left;" />
</div>


</body>

Here's the jsfiidle

谢谢

【问题讨论】：

使用 reset.css 样式表或 normalize.css 样式表。
好问题。如果我从 div id=left 中取出宽度，那么一切都合适。从我所见，似乎 IE10 以不同的方式呈现字体。 Arial 看起来更宽。
我认为您不能在新的 IE 中正确使用宽度和浮点数，可以吗？如果你指定宽度，无论如何它都会尝试适应这个宽度。
@AgnosticDev 这些重置都没有帮助......
我可能在这里遗漏了一些东西，但是您的小提琴在 IE9,10 上看起来与在最新的 Chrome 和 Firefox 上一样。如果您发布问题的屏幕截图和预期结果会很好。

标签： html css internet-explorer fonts rendering

【解决方案1】：

您的屏幕截图之间的差异实际上来自相关浏览器之间的字体渲染差异。下面是 Win7 上 Chrome 和 IE9 中小提琴中 A 字母的放大屏幕截图（添加 letter-spacing: 0; 后）。

如您所见，即使是相同的字体 (Arial)，font-size、font-weight 和 letter-spacing 在这两种情况下，IE9 都会将字母渲染得更宽一些，这会使行/单词更长。

IE9 使用 DirectWrite 模式/技术来呈现字体，这与 IE6-8 以及 Windows 机器上的 Chrome、Opera（有时是 Firefox）使用的 GDI 模式 (source) 不同。这就解释了为什么 IE9（及更高版本）在 Windows 上呈现的字体与其他浏览器不同。

根据上面同一篇文章：

DirectWrite 不仅可以提供更平滑的轮廓，还可以将亚像素渲染应用于 PostScript 字体。然而，与 TrueType 渲染不同的是，它允许更多的灰色像素，以便更真实地反映笔画粗细。这使它非常平衡，并且类似于 Mac OS 渲染。

DirectWrite 字体渲染与 Mac OS 字体渲染相似（但不一样），这可能解释了为什么我在 OSX 上的 Chrome 和 Firefox 中获得的结果与您在 IE9 中获得的结果相似。

更新：您可以尝试的一件事是尝试不同的网络字体。 In this example，我用过Source Sans Pro（谷歌字体），你可以看到IE9和Chrome在渲染上的差异不太明显。

【讨论】：

谢谢，你是对的。我想知道解决这个问题的最佳方法是什么？只需为 DIV 添加更多宽度，即使在这种情况下它会在所有其他浏览器中创建太多额外空间.. 还是有更好的解决方案？
为什么不让文字正常流动呢？它在所有浏览器中占用完全相同的空间是否重要？如果您告诉我更多有关实际最终结果的信息，我可能会帮助您解决问题。
Here's a fiddle illustrating the problem，如您所见，我有一个靠近底部的按钮，每当文本滑动时，都会导致最后一行被该按钮覆盖。也许有更好的方法来定位所有这些元素，以便它们适应？
这些是为了使所有 3 列看起来具有相同的高度。如果删除这些样式，如果左列有更多内容，则右列/中间列的底部会有一个间隙。
这也是一种称为“一个真正的布局”的技巧的一部分，用于使列具有相同的高度。容器上的overflow: hidden; 隐藏了由大填充/边距创建的额外列高。您可以阅读更多关于它的信息here。