firefox检查器中的所有css字体系列定义都被打破了

Question

我使用Firefox的 Inspect Element 功能来确定在某个元素上使用了哪个字体系列。 在我的实际情况中，我只能找到在规则窗格中描述的字体系列定义。我认为它们已经被另一个CSS规则覆盖在更高的位置。但是没有对font-family的定义，因为整个规则窗格都没有这个定义。 最重要的一个显示如下：

.helvetica-neue-websave {
     font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif
}

另一方面，当我查看检查器的字体窗格时，我看到我的元素的字体系列是 Helvetica Neue Condensed Bold 但是我找不到它，它在哪里被定义

编辑：计算窗格表明它使用 HelveticaNeue，＆＃39; Helvetica Neue＆＃39;，Helvetica，Arial，Verdana，sans-serif ，但它绝对是精简版。

所以，任何人都可以指导我如何找到这个字体系列定义的位置??? 它不在HTML本身中，也不在我在规则窗格中看到的CSS文件中。 希望我的问题清楚，对不起我的英语

Answer 1

您是否看到font-family是“Helvetica Neue Condensed Bold”或者您是否看到用于font-family 的字体资源是“Helvetica Neue Condensed Bold”？因为那些是完全不同的两件事。听起来像后者，在这种情况下：CSS根据提供的名称向浏览器询问“字体”。

1. 浏览器检查是否有任何明确的资源限制（使用@ font-face），如果没有，则会询问操作系统是否有与指定的CSS名称匹配的字体。
2. 如果操作系统找不到它们，CSS将回退到下一个字体并再次尝试。重复步骤1和步骤2，直到资源耗尽为止。

在任何时候，允许浏览器或操作系统“是的，我找到了什么”，只要他们知道匹配的资源“足够好”，所以如果你要求Helvetica Neue，操作系统最终会被问到为此，它可以去“哦，是的，我有一个Helvetica Neue在这里”，然后给浏览器Helvetica Neue Condensed。这是100％可接受的：它是“Helvetica Neue”的众多合法比赛之一，因为这是实际的姓氏，而“常规”，“压缩”，“瘦”，“倾斜”等都不是。

如果您不接受这种开发，那么您的CSS需要变得更加精确：要么只接受'Helvetica Neue Regular'，这是一个糟糕的计划，要么加载实际的字体，以便您正确控制哪个字体将被使用，没有咨询操作系统。特别是对于只有Mac用户才会安装的字体（unix，linux和windows用户都不会：并且需要先购买），所以在其他平台上保证打破。

使用您想要的字体创建@font-face规则，font-family类似ContentFont（如果您以后想要其他字体，那么您只需要替换{ {1}}绑定，不更改任何内容CSS）然后将其指向真正的src字体资源（不使用.woff，因为再次，不能保证你会得到你要求的，它可能解决“足够好”，而人类的眼睛绝对是错误的）