Firefox 检查器中的所有 CSS 字体系列定义都被删除答案

【问题标题】：all css font-family definitions in firefox inspector striked throughFirefox 检查器中的所有 CSS 字体系列定义都被删除
【发布时间】：2016-06-15 09:17:02
【问题描述】：

我正在使用 Firefox 的 Inspect Element 功能来确定在某个元素上使用了哪个字体系列。在我的实际情况下，我只能找到在规则窗格中划过的字体系列定义。我认为它们已被另一个 CSS 规则覆盖在更高的位置。但是没有字体系列的定义，它没有贯穿整个规则窗格。最上面的显示如下：

.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 文件中。希望我的问题很清楚，对我的英语感到抱歉

【问题讨论】：

有可能是您在 css 中提到的字体无法被浏览器/系统识别，当这种情况发生时，浏览器会用最接近的匹配替换丢失的字体
有时会很痛苦。在 Chrome 上有一个“计算”选项卡，显示实际应用的规则。在您的情况下，它可能会被某些父元素覆盖，不一定是元素本身，这就是为什么您可能看不到它在您的元素中设置的原因。
FF 也有这个计算选项卡，显示它使用“HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif”，但事实并非如此，因为它使用了“condensed”版本。所以必须在某个地方定义“Helvetica Neue Condensed Bold”（因为我猜它不是网络安全的）？？？
PS：我还查看了所有父元素，但找不到该精简字体类型的声明...

标签： css firefox fonts inspect

【解决方案1】：

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

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

在任何时候，只要他们知道的资源名称匹配“足够好”，浏览器或操作系统就可以“是的，我找到了一些东西”，所以如果你要求 Helvetica Neue，操作系统最终会被问到为此，它可以“哦，是的，我在这里有一个 Helvetica Neue”，然后给浏览器 Helvetica Neue Condensed。这是 100% 可以接受的：它是“Helvetica Neue”的众多合法匹配之一，因为这是实际的姓氏，而“Regular”、“Condensed”、“Thin”、“Oblique”等则不是。

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

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

【讨论】：