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

时间:2013-09-19 16:56:15

标签: google-chrome fonts font-face web-inspector

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

3 个答案:

答案 0 :(得分:41)

您可以使用“网络”标签查看下载的网络字体:

Google Chrome Network tab showing downloaded web fonts

答案 1 :(得分:27)

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

Google Chrome styles tab showing computed rendered fonts

答案 2 :(得分:0)

目前最好的方法

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

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

Application tab

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