css - 为什么 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 等元素上) .).