一、前言：字体格式的重要性
在现代网页开发中，字体不仅影响视觉呈现，还直接影响页面加载性能和用户体验。常见的网页字体格式包括 woff、woff2、ttf、eot 和 svg 等。开发者经常需要确认网页中实际使用的字体及其格式，以进行优化或调试。
本文将从基础操作开始，逐步深入，讲解如何使用浏览器开发者工具查看网页中使用的字体格式，并介绍一些辅助工具和扩展。
二、通过 Chrome 开发者工具查看字体格式
Chrome 浏览器提供了强大的开发者工具（DevTools），我们可以通过以下步骤查看字体信息：
打开目标网页，右键点击页面任意位置，选择“检查”（Inspect）或按下 F12 打开 DevTools。切换到“Network”（网络）面板，并刷新页面。在“Network”面板的“Name”列中查找以 .woff、.woff2、.ttf 结尾的资源。点击对应的字体资源，在右侧的“Headers”（请求头）部分查看“Content-Type”字段，确认其 MIME 类型。在“Computed”（计算样式）面板中选择任意文本元素，查看其 font-family 和 font-weight 等样式信息。
通过这种方式，可以清晰地看到网页加载的字体资源及其格式。
三、通过 Firefox 开发者工具查看字体格式
Firefox 同样提供了功能强大的开发者工具，操作步骤如下：
打开网页，右键点击任意文本区域，选择“检查元素”。切换到“Network”选项卡，刷新页面。在“Type”列中筛选出字体资源（如 font-woff、font-ttf）。点击具体字体资源，查看“Response Headers”中的 Content-Type 和文件扩展名。在“Inspector”面板中选择文本元素，切换到“Computed”选项卡，查看字体相关样式。
Firefox 的开发者工具界面与 Chrome 类似，但字体资源的分类更加清晰。
四、通过计算样式面板查看字体家族和格式
在 Chrome 或 Firefox 的“Computed”面板中，可以查看当前元素使用的字体家族（font-family）和字体格式信息：
选中任意文本元素，点击“Computed”面板。展开“font”相关属性，查看 font-family、font-weight 和 font-style。虽然无法直接看到字体格式（如 woff2），但可以结合字体名称和网络面板确认。
此方法适用于快速定位页面中某个元素所使用的字体家族。
五、使用浏览器扩展辅助查看字体
除了原生开发者工具，还可以借助一些浏览器扩展来更便捷地查看字体信息：
扩展名称支持浏览器功能简介WhatFontChrome, Safari点击页面任意文本即可显示字体名称、样式和格式。FontFace NinjaChrome, Firefox可检测网页中使用的所有字体并提供下载链接。
这些扩展工具对于快速识别字体格式非常有帮助，尤其适合设计师或前端开发者。
六、流程图：查看字体格式的完整路径
graph TD
A[打开网页] --> B{使用开发者工具}
B --> C[Chrome Network 面板]
C --> D[查找 .woff/.ttf 文件]
D --> E[查看 Content-Type]
B --> F[Firefox Network 面板]
F --> G[筛选 font 类型]
G --> H[查看字体格式]
B --> I[Computed 样式面板]
I --> J[查看 font-family]
A --> K[使用扩展插件]
K --> L[WhatFont]
K --> M[FontFace Ninja]