Question

希望它能让我的网页在现代浏览器中看起来一样，我包含了一些reset.css以及以下几行

body {
    *font-size: small;
    font-family: arial,helvetica,sans-serif;
    font: 16px/18px sans-serif;
    margin: 0 auto;
}

然而，我的Firefox 20中的字体（对于Ubuntu Canonical - 1.0）仍然比我的Chromium 25.0.1364.160 Ubuntu 10.04大几个百分点。有趣的是，以下规则有所帮助：

* {
    font-family: arial,helvetica,sans-serif;
}

看起来Firefox也会覆盖span的字体，但我无法在Web Developer Tools中看到它。它只是选择不同的字体，尽管它不应该。

我已经创建了plunk来显示它（只需删除星形规则即可查看更改）。我的问题是

解释是什么？
重置样式的正确方法是什么？我们真的需要明星规则以防万一吗？

Answer 1

解释是font: 16px/18px sans-serif将字体系列设置为sans-serif，这是一个依赖于浏览器的默认sans serif字体。它会覆盖前面的font-family设置。显然，在你的Firefox中，sans-serif被映射到一个看起来比Arial小的字体，对于相同的字体大小。所以字体大小相同，字母只是更小。

最简单的解决方法是恢复两个声明的顺序：

body {
    font: 16px/18px sans-serif;
    font-family: arial,helvetica,sans-serif;
    margin: 0 auto;
}

（*font-size hack在这里毫无意义，因为稍后会设置一个规则来设置字体大小。）

或者，您可以合并规则：

body {
    font: 16px/18px arial,helvetica,sans-serif;
    margin: 0 auto;
}

“重置样式的正确方法是什么？”这个问题主要是基于意见的，也与所提出的技术问题无关。在body上设置字体属性并不是真正的“重置样式”，只是普通的样式。从技术上讲，设置例如关于所有元素的font-family会产生相当大的影响，只有在您真正了解其影响时（例如，在表单字段，code等元素上），您才应该这样做。

为什么Firefox会忽略我全局指定的字体？

1 个答案: