css - CSS级联优先级混淆

Question

我很困惑为什么这个网站上<h1>有一个of （至少在 Chrome 中查看时）。font-familyHelvetica

从 Google Developer Tools 看来，字体系列似乎是从 Bootstrap CSS 的body规则继承而来的（参见bootstrap.min.css）。

names.css文件不应该优先吗？这在标签上明确设置了 a font-familyof 。Lobsterh1

Answer 1

这不是选择器优先级问题：Chrome 不会接受该inherit属性font-family作为后备。删除它，您将按预期获得字体。

标准表示接受font-family字体列表或特殊值，但不接受两者inherit的混合。我相当肯定，如果在列表中找不到字体，它会回退到inherit。

Answer 2

当我打开该网页时，Chrome 会在该行上给我一个黄色感叹号三角形，因此它不会处理该 CSS 字体规范。

你声明了一个@font-face {}？在我看来，字体没有正确安装，因为 Chrome 不知道如何处理它。

---

编辑：

删除inherit即可解决问题。