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

Question

在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的视图。注意'褐色'中部分模糊的'o'，'dog'中'g'的位置和底边的下划线'_'。

这是Google Chrome 19.0的观点。

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

Answer 1

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

Answer 2

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