相同的字体、字符间距和行高，但结果不同答案

【问题标题】：Same font, character spacing and line-height but different results相同的字体、字符间距和行高，但结果不同
【发布时间】：2012-06-05 04:36:55
【问题描述】：

在 CSS3 中引入 @font-face 允许网页设计师使用在所有浏览器中看起来相同的字体。这就是我的想法，直到在jsFiddle 中使用以下代码进行尝试：

HTML：

<div>
    The_Quick_Brown<br>
    Fox_Jumps_Over<br>
    The_Lazy_Dog
</div>

CSS：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

div {
    display: block;
    width: 496px;
    height: 86px;
    font-size: 1.3em;
    font-family: 'Open Sans';
    font-style: normal;
    margin: 0;
    border: 0;
    padding: 0;
    background: cyan;
    letter-spacing: 1.44em;
    line-height: 1.44;
    overflow: hidden;
}

这是 Firefox 12.0 的视图。注意'brown'中部分被遮挡的'o'、'dog'中'g'的位置以及底部边缘的下划线'_'。

这是来自 Google Chrome 19.0 的视图。

尽管为相同的字体明确设置了letter-spacing 和line-height，但为什么结果仍然不同？

【问题讨论】：

这可能与 div 的渲染有关，然后是其中的内容。可能
字体渲染将取决于浏览器渲染它的感觉。因此，浏览器也会以不同的方式呈现letter-space。我注意到，在 FF 中使用 monospace 字体时，您不会得到想要的结果，因为 FF 不正确支持 monospace 字体。这里可能是类似的东西吗？
Chrome 中的字符似乎比 FF 中的高而窄。

标签： html css

【解决方案1】：

您的代码是正确的。问题是您的浏览器/每个浏览器（具体的浏览器渲染引擎）以不同的方式渲染内容。您可能不会一直从每个浏览器获得完全相同的输出。功能和所有其他亮点可能相同，但在呈现网页方面几乎总是不同的故事。

【讨论】：

【解决方案2】：

在这个问题上我们没有什么可做的。它完全取决于浏览器的文本渲染引擎。每个浏览器都以不同的方式呈现文本。

【讨论】：