WhatFont 浏览器扩展翻译站点

一、网站简介

WhatFont是一款轻量级的浏览器扩展程序，支持Chrome、Safari和Edge浏览器。用户只需点击扩展图标激活探测模式，然后将鼠标悬停在网页中的任意文字上，即可即时显示该文字的字体名称、字重、字号、行高、颜色等CSS属性。它不像开发者工具那样一股脑地显示所有CSS属性，而是只返回文字相关的排版信息，清爽高效。此外，WhatFont还借助MyFonts的图片识别接口，支持识别网页图片中的字体。

二、公司背景

WhatFont最初由独立开发者Chengyin Liu创建，是一款在全球前端开发者和网页设计师中拥有极高口碑的免费开源工具。凭借其极简的操作逻辑和精准的字体检测能力，该扩展在Chrome Web Store中拥有数百万用户，是网页字体检测领域的标杆工具。其简洁优雅的交互设计也成为后来众多同类工具的参照标准。

三、核心功能

• 悬停即显字体信息：激活扩展后，鼠标悬停在网页任意文字上，即可弹出浮层显示字体名称（Font Family）、字重、字号、行高和颜色。
• 字体详情深入查看：点击悬停的文字区域，弹出详细面板展示完整的CSS字体属性，包括font-style、font-variant等。
• 网页图片字体识别：借助MyFonts的API接口，可对网页中的图片文字进行识别，填补了纯CSS检测无法识别图片字体的空白。
• Google Fonts快速识别：对网页中使用的Google Fonts能快速识别并提供字体预览链接。
• 全局字体汇总：可一键查看当前网页使用的所有字体列表，方便进行字体分析。

四、网站特点

• 极简交互体验：悬停即显示，无需打开开发者工具、无需手动筛选CSS属性，是最简洁高效的网页字体检测方式。
• 功能专精：只做字体检测这一件事，避免了复杂功能的干扰，专注度极高。
• 免费开源：完全免费使用，社区版本开源，代码透明可信。

五、适用人群

• 网页设计师：在浏览优秀网站寻找灵感时，需要快速了解其使用的字体组合与排版参数。
• 前端开发者：在开发网页时需要参考其他网站的字体设置，或检查自己页面的字体是否正确加载。
• UI/UX设计师：在进行竞品分析时，需要提取竞品网站的字体使用方案作为参考。
• 字体爱好者：浏览网页时看到喜欢的字体，想快速知道它的名字。

六、应用场景

• 网站字体灵感收集：设计师在浏览国际知名设计网站时，看到某网站的排版非常优雅，使用WhatFont悬停检测标题和正文字体，快速记录下字体搭配方案。
• 前端开发字体调试：前端开发者在项目中引入Web字体后，使用WhatFont快速检查字体是否正确加载和渲染，确认显示效果与设计稿一致。
• 竞品网站字体分析：产品设计团队对竞品官网进行全面的字体使用分析，使用WhatFont逐一检测各板块的字体选择并汇总成竞品分析文档。

七、常见问题（FAQ）

Q：国内能否直接访问？
A：WhatFont扩展程序可通过Chrome Web Store或Edge Add-ons商店安装，但扩展商店在国内网络环境下可能无法直接访问，需在特定网络环境下操作。安装后在国内正常浏览网页时使用不受影响。

Q：WhatFont是免费的吗？
A：是的，WhatFont浏览器扩展完全免费使用，无任何付费功能或订阅要求。

Q：能识别网页中所有字体吗？
A：能识别网页中通过CSS声明的字体（包括Web字体和系统字体），但对于以图片形式呈现的文字（如Banner图中的文字），需借助其图片识别功能（依赖MyFonts API）。

Q：与浏览器自带的开发者工具有什么区别？
A：开发者工具显示的是元素的所有CSS属性，信息繁杂，需要手动筛选字体相关属性。WhatFont则只提取字体相关的排版信息，操作更直观、效率更高。

八、类似网站

• Fonts Ninja：功能更丰富的字体浏览器扩展，支持字体书签管理和相似字体推荐。
• FontDetector Pro：Firefox专用字体检测扩展，支持Google Fonts实时预览与字体集合管理。
• CSS Peeper：综合性网页设计元素检测扩展，除字体外还可查看颜色、尺寸等设计参数。