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

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'，'狗'的'g'的位置和底部边缘的下划线'_'。

这是谷歌浏览器19.0的看法。

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

Answer 1

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

Answer 2

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