删除了 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，'Helvetica Neue'，Helvetica，Arial，Verdana，sans-serif 但它绝对是压缩版本。

那么，谁能指导我如何找出这个字体系列定义的位置？？？它不在 HTML 本身和我在规则窗格中看到的 CSS 文件的 none 中。希望我的问题很清楚，对不起我的英语

Answer 1

你看到字体系列是"Helvetica Neue Condensed Bold"还是你看到用于字体系列的字体资源是"Helvetica Neue Condensed Bold"？因为那是两个完全不同的东西。听起来像后者，在这种情况下：CSS 根据提供的名称向浏览器请求 "a font"。

浏览器检查它是否绑定了任何显式资源（使用@font-face），如果没有，它会向 OS 询问与指定名称 CSS 匹配的字体。
如果 OS 找不到它们，CSS 会回退到下一个字体并重试。重复第 1 步和第 2 步，直到我们运行资源不足。

在任何时候，浏览器或 OS 都可以 "yeah I found something" 提供他们知道匹配的资源名称 "well enough"，所以如果你要求 Helvetica Neue，并且OS 最终被要求这样做，然后它可以去 "oh yeah I have a Helvetica Neue here" 然后给浏览器 Helvetica Neue Condensed。这是 100% 可接受的：它是 "Helvetica Neue" 的众多合法匹配项之一，因为那是实际的姓氏，并且 "Regular"、"Condensed"、"Thin"、"Oblique"等都不是。

如果开发时您不能接受，那么您的 CSS 需要变得更精确：要么开始只接受 'Helvetica Neue Regular'，这是一个糟糕的计划，要么加载实际的字体这样您就可以正确控制将使用哪种字体，而无需咨询 OS 。特别是对于只有 Mac 用户会安装的字体（unix，linux 和 windows 用户都不会：需要先购买），保证破解在其他平台上。

用你想要的字体创建一个@font-face规则，用font-family像ContentFont（这样如果你以后想要不同的字体，你所要做的就是替换src 绑定，不更改任何内容 CSS)，然后将其指向真正的 .woff 字体资源（不使用 local() 因为同样，不能保证你会得到什么你要求，它可能会解决 "good enough" 而对人眼来说是绝对错误的）

删除了 firefox 检查器中的所有 css 字体系列定义

all css font-family definitions in firefox inspector striked through

css

firefox

fonts

inspect