在检查器中哪里可以看到chrome加载的字体文件？

Question

chrome 检查器中的哪个选项卡显示您通过 font-face 加载的字体文件？我在资源下找不到它。我遇到一个问题，一组字体系列文件正在加载，但另一组字体系列文件没有加载。我已经检查了所有内容，从直接访问 URL 到看到它们确实存在，但我想在检查器中查看并看到它加载一种字体系列，而不是另一种。 chrome 可以吗？

Answer 1

您还可以在元素面板中选择任何文本节点，然后查看计算样式选项卡的底部以查看为该元素呈现的字体

Answer 2

您可以使用“网络”选项卡查看下载的网络字体：

Answer 3

目前为止最好的方法

您实际上可以执行

rightclick: inspect > Application (on the top tabs) > Frames (scroll on the left tabs)

然后您可以找到一个

Font

部分，其中列出了所有加载的字体。它还具有字体预览。它列出了以任何可能的方式加载的所有字体。

最好的部分是，它还在右侧预览它们，以便更轻松地找到那个

然后您可以右键单击您选择的选项，然后单击“在新选项卡中打开”，它就会下载它。然后您可以在文件名末尾添加 .woff 并在您喜欢的任何地方使用它。 （您也可以在预览底部获得其扩展名）

Answer 4

虽然这并不能直接回答问题，但就我而言，有帮助的一件事是：

1. 打开“来源”选项卡；
2. 找到具有相关字体声明的样式表；
3. 搜索

   @font-face

   以查找字体名称。

您还可以通过单击样式表名称直接从“网络”选项卡跳转到样式表。

字体声明的存在并不一定意味着浏览器已成功下载该字体，但查看字体的实际名称很有帮助。

就我而言，结果发现字体名称没有声明为

DM Sans

，而是

Dmsans

。

更改为

font-family: Dmsans, sans-serif;

解决了我的问题。