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

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

但有没有办法告诉使用哪个特定的字体文件？我试图验证浏览器是否实际使用了字体的粗体版本，例如，而不是自己做假的＆＃39;假的＆＃39;在常规版本的字体上加粗。

Answer 1

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

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

Answer 2

• 打开Chrome DevTools（右击＆gt; Inspect）
• 转到“来源”标签
• 查找字体文件夹（如果您使用的是Google字体，请访问☁fonts.gstatic.com）
• 打开子目录（如果有），您将获得实际的字体文件 使用

Answer 3

在Safari中，它会告诉我们。您加载的特定字体文件。

Fonts
    fontfileBold.ttf

Answer 4

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

检查渲染字体：

检查字体文件名称：