2

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;
}

火狐12.0

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

谷歌浏览器 19.0

这是来自 Google Chrome 19.0 的视图。

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

4

2 回答 2

3

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

于 2012-06-05T06:35:48.863 回答
0

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

于 2012-06-05T06:36:26.240 回答