Question

我对这种情况感到困惑。这里有jsfiddle链接：

这是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：浓缩

，则可以修复它

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

Answer 2

删除

font-family: "Arial Narrow",Arial,Helvetica,sans-serif;

从H1开始使用默认字体。或者使用Google或Adobe的开源字体。

Answer 3

Firefox无法识别字体＆＃34; Arial Narrow＆＃34; 所以你有两个选择

选项1：

在字体中，所以firefox可以识别它：

@font-face {
  font-family: "Arial Narrow";
  src: url(http://linktofont.com);
}

选项2：使用所有浏览器都知道的字体

为什么Firefox中的h1标题看起来比其他浏览器更宽

3 个答案: