57

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

4

3 回答 3

64

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

显示计算渲染字体的 Google Chrome 样式选项卡

于 2017-09-27T14:14:48.243 回答
51

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

谷歌浏览器网络标签显示下载的网络字体

于 2013-09-19T17:03:57.130 回答
1

迄今为止最好的方法

您可以实际执行rightclick: inspect > Application (on the top tabs) > Frames (scroll on the left tabs)然后您可以找到Font列出所有加载字体的部分。它列出了以任何可能的安全方式加载的所有字体。

最好的部分是,它还在右侧预览它们,以便更容易找到

应用程序选项卡

然后,您可以右键单击您选择的那个并单击在新选项卡中打开,它会下载它。然后您可以在文件名的末尾添加一个 .woff 并在您喜欢的任何地方使用它。(您也可以在预览的底部获得它的扩展名)

于 2021-07-11T22:18:33.203 回答