如何确定正在使用的字体文件，而不仅仅是字体系列？答案

【问题标题】：How can I determine which font file is being used, not just the font family?如何确定正在使用的字体文件，而不仅仅是字体系列？
【发布时间】：2018-04-23 08:14:21
【问题描述】：

假设我有以下字体定义：

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans.regular.woff") format("woff");
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans.light.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans.semibold.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans.bold.woff') format('woff');
}

在 Chrome 的开发工具中，我可以知道正在使用哪个字体系列：

但是有没有办法知道正在使用哪个特定的字体文件？例如，我正在尝试验证浏览器实际上使用的是字体的粗体版本，而不是在常规字体版本上使用自己的“假”粗体。

【问题讨论】：

试试火狐它会在开发工具中显示字体选项
有一个 chrome 扩展 WhatFont 可用。这就是我使用的。但这完全取决于您。
其实我说的是废话，就我而言，字体名称+变体似乎包含在文件本身中。
@nabanita 我已经尝试过 WhatFont，除了 DevTools 已经提供的信息之外，它没有给我任何信息。我需要使用的特定字体文件，而不仅仅是字体系列。

标签： css google-chrome-devtools font-face

【解决方案1】：

打开 Chrome DevTools（右键 > 检查）
转到“来源”选项卡
查找字体文件夹（如果您使用的是 Google 字体，请访问 ☁fonts.gstatic.com）
打开子目录，如果有的话，你会得到实际的字体文件用过

【讨论】：

这仅显示加载了哪些字体，而不是实际用于特定元素的字体。我正在使用不同字体粗细和样式的混合，我需要一些明确的东西来告诉我用于给定元素的确切字体文件。

【解决方案2】：

为了回答我自己的问题，Nikul Khatik 给出了正确答案。 Chrome 开发工具不支持此功能，但 Firefox 支持：

因此，请使用 Firefox 获取用于元素的实际字体。

【讨论】：

Chrome DevTools 的 Styles tab 或 Computed tab 没有给你这些信息？
@KayceBasques 正如我在问题中提到的，我需要确定浏览器是否实际使用 Open Sans 粗体字体，或者它是否使用 Open Sans 常规字体并应用自己的粗体。 Chrome 开发工具不会为您提供此信息，因为如果您有 3 个 font-face 定义仅在 font-weight 和使用的 src 文件中有所不同，则字体在 Chrome 开发工具中将始终为“Open Sans”，而您不能告诉正在使用哪个特定的字体文件。
好的，我想我理解这个限制。感谢您的澄清。我将打开一个功能请求。

【解决方案3】：

在 Safari 中，在资源中它会告诉你。您加载的特定字体文件。

Fonts
    fontfileBold.ttf

【讨论】：

【解决方案4】：

在 Chrome 中，无法知道加载了哪个字体文件，但您可以通过查看“计算”选项卡中的“渲染字体”，然后检查“应用程序”选项卡中的字体文件名来获得很好的提示

检查渲染字体：

检查字体文件名：

【讨论】：