Html 字体、字符间距和行距相同，但结果不同

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

HTML：

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

@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”的位置，以及底部边缘的下划线“u”

这是谷歌Chrome19.0的视图

---

尽管为同一字体明确设置了

字母间距

和

行高

，但为什么结果仍然不同？

您的代码是正确的。问题在于您的浏览器/每个浏览器（特定于浏览器渲染引擎）以不同的方式渲染内容。您可能无法始终从每个浏览器获得完全相同的输出。功能和所有其他Bling可能是相同的，但就呈现网页而言，几乎总是不同的故事。

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

它可能与div的呈现更相关，然后是div中的内容。字体呈现可能取决于浏览器呈现字体的感觉。正因为如此，浏览器也以不同的方式呈现

字母空间。我注意到，在FF中使用
monospace
字体时，由于FF不正确支持
monospace
字体，因此无法获得所需的结果。这可能是一个类似的事情吗？看起来在Chrome中的角色比在FF中的角色更高更窄。