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

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 开发人员工具中看不到它。它只是选择了不同的字体，尽管它不应该。

我创建了一个plunk 来展示它（只需放下星号即可查看更改）。我的问题是

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

Answer 1

解释是font: 16px/18px 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 等元素等）。