可通过开发者工具“网络”面板筛选font请求确认第三方字体加载,结合“元素”面板查@font-face规则、“应用”面板看已注册字体、“控制台”执行font loading api脚本,或安装whatfont等扩展实现多路径验证。

如果您希望确认某个网页是否加载了Web字体(如Google Fonts、Adobe Fonts或自托管的WOFF/WOFF2文件),则可能是由于网页通过@font-face规则动态引入外部字体资源,而这些请求未在页面源码中显式可见。以下是分析网页第三方字体加载行为的具体操作路径:
一、通过开发者工具的“网络”面板筛选字体资源
该方法直接捕获浏览器实际发出的字体文件HTTP请求,可准确识别所有已加载的第三方字体格式(WOFF、WOFF2、TTF、OTF等),并显示其来源域名、大小、状态码及加载耗时。
1、在目标网页任意位置右键,选择“检查”或按快捷键Ctrl+Shift+I(Windows/Linux)或Cmd+Option+I(macOS)打开开发者工具。
2、切换到顶部标签栏中的“网络”(Network)选项卡。
3、点击左上角的过滤器图标(漏斗形)或直接在过滤框中输入font,系统将自动筛选出所有字体类型请求。
4、刷新网页(F5或Ctrl+R),观察列表中出现的请求:若域名非当前网站主域(例如fonts.googleapis.com、use.typekit.net、cdn.jsdelivr.net等),即为第三方字体服务。
5、点击任一字体请求,在右侧“标头”(Headers)面板中查看“Request URL”与“Referrer”,确认其加载上下文;在“预览”(Preview)或“响应”(Response)中可验证字体文件是否完整返回。

二、在“元素”面板中定位@font-face CSS规则
该方法用于追溯字体声明源头,识别网页CSS中定义的字体族名称、src路径及格式声明,尤其适用于自托管字体或内联样式表场景,可判断字体是否被声明但未成功加载。
1、右键网页中任意文字区域,选择“检查”,进入“元素”(Elements)面板。
2、在HTML结构树中,右键任意节点,选择“Scroll into view”确保可视区域包含样式关联元素。
3、在右侧“Styles”面板中,点击顶部的“All”按钮,展开全部CSS来源(含内联样式、外部CSS、用户代理样式)。
4、使用Ctrl+F(Windows/Linux)或Cmd+F(macOS)搜索@font-face,逐条查看其font-family值与src属性中的URL。
5、若src中包含url(https://...)或url(/fonts/...),记录该路径并回到“网络”面板验证其是否成功加载(状态码200)或失败(404/403)。

三、利用“应用”面板查看已加载字体实例
该方法展示浏览器内存中当前已解析并注册的字体族列表,包括系统字体与网页动态加载的Web字体,可快速确认字体是否被成功注入并可供渲染使用。
1、保持开发者工具开启,切换至“应用”(Application)选项卡。
2、在左侧边栏展开“字体”(Fonts)节点。
3、查看右侧列出的所有字体族名称;若存在非系统默认字体(如“Roboto”“Inter”“Noto Sans SC”等),且其“来源”列为network或custom,即为网页加载的第三方字体。
4、双击某字体名称,可在弹出的预览窗口中查看其字重、字宽及可用Unicode范围。

四、使用命令行控制台执行字体枚举脚本
该方法绕过UI限制,通过JavaScript直接调用CSS Font Loading API,获取当前页面中所有已声明且处于加载生命周期内的字体对象,适用于需批量分析或自动化检测的场景。
1、在开发者工具中切换至“控制台”(Console)选项卡。
2、输入以下代码并回车执行:
document.fonts.forEach(font => console.log(font.family, font.status, font.load()));
3、观察输出结果:status为loaded表示字体已就绪;status为loading或error则对应加载中或失败状态。
4、对status为error的字体,可进一步执行font.load().catch(e => console.error(e))获取具体错误原因(如跨域拒绝、MIME类型不匹配)。
五、安装专用扩展辅助识别字体来源
该方法面向非技术用户,提供可视化悬浮提示与一键跳转功能,可快速识别鼠标悬停文字所用字体及其CDN来源,降低手动分析门槛。
1、访问Chrome网上应用店,搜索并安装WhatFont或Font Finder扩展程序。
2、安装完成后,点击浏览器右上角扩展图标启用该工具。
3、在目标网页上将鼠标悬停于任意文字上方,扩展将实时显示字体族名、字号、颜色及src URL(若为Web字体)。
4、单击文字区域,扩展弹窗中将明确标注“Hosted by: fonts.gstatic.com”或类似第三方服务商标识。











