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

o_O*_*o_O 36 fonts google-chrome font-face web-inspector

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

adr*_*ift 43

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

Google Chrome网络标签显示下载的网络字体

  • 屏幕截图显示了加载指向字体的CSS文件,但它实际上并没有显示加载的字体; 只是指向它们的文件/从哪里加载它们. (2认同)

小智 31

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

Google Chrome样式标签显示计算的渲染字体

  • 这应该是(新)接受的答案!:)我从来没有想过要一直滚动到所有这些计算属性下面的最底部!我一直在寻找这个好几个小时.谢谢@cfg! (2认同)
  • 在“渲染字体”部分,我看到的只是“-网络资源(310个标志符号)”。这是什么意思? (2认同)

Abr*_*ham 26

迄今为止最好的方法

您实际上可以这样做rightclick: inspect > Application (on the top tabs) > Frames (scroll on the left tabs)然后您可以找到Font列出所有加载字体的部分。它还具有字体预览。它列出了以任何可能的方式加载的所有字体。

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

应用选项卡

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