我如何确定正在使用哪个字体文件，而不仅仅是字体系列？

Question

假设我有以下字体定义：

@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的开发工具中，我可以分辨出正在使用的字体系列：

但是有没有办法判断正在使用哪个特定字体文件？例如，我正在尝试验证浏览器是否确实使用了粗体版本的字体，而不是在常规版本的字体上使用自己的 'fake' 粗体。

Answer 1

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

Answer 2

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

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

Answer 3

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

Fonts
    fontfileBold.ttf

Answer 4

在 Chrome 中无法知道加载了哪个字体文件，但您可以通过检查 "Computed" 选项卡中的 "Rendered Fonts" 然后检查字体文件名称来获得很好的提示在 "Application" 选项卡中

检查渲染字体：

检查字体文件名：

我如何确定正在使用哪个字体文件，而不仅仅是字体系列？

How can I determine which font file is being used, not just the font family?

css

font-face

google-chrome-devtools