html - 为什么 h1 header 在 Firefox 中看起来比在其他浏览器中更宽

Question

我对这种情况感到困惑。这是 jsfiddle 链接:

http://jsfiddle.net/mddc/jkxy24x5/

这是 HTML:

<h1>Test Header</h1>

这是 CSS:

body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8em;
}

h1 {
    color: #333333;
    line-height: 1.5em;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h1 {
    border: 0 none;
    margin: 0;
    padding: 0;    
}

h1 {
    color: #999999;
    font-family: "Arial Narrow",Arial,Helvetica,sans-serif;
    font-size: 2.3em;
    letter-spacing: 0.03em;
    line-height: normal;
    margin: 0 0 12px;
}

在上面，我从实际网站中提取了准确的 CSS 代码及其顺序。 h1 文本在 Firefox 中看起来比在其他浏览器中更宽。我怎样才能让它在 Firefox 中看起来更窄，就像在其他浏览器中一样？

Answer 1

因为

font-family: "Arial Narrow",

Firefox 无法识别。

但是如果你尝试添加 font-stretch: condensed 就可以修复它

http://jsfiddle.net/jkxy24x5/1/