安装 WhatFont 的三个步骤
- 在 Chrome 网上应用店搜索 WhatFont，点击「添加至 Chrome」并确认安装，整个过程不超过一分钟。
- 工具栏出现 WhatFont 图标后，点击该图标即可激活字体识别模式。
- 将鼠标悬停在任意文本上，会显示字体名称；点击文本则可查看字重、字号、行高、颜色等详细信息。完成后点击「Exit WhatFont」退出识别模式。
部分用户反馈，首次使用前需要刷新页面或重启浏览器，该扩展才能正常工作。
WhatFont 是什么
WhatFont 是一款 Chrome 浏览器扩展，用于快速识别网页中文字的字体信息。设计师和开发者在浏览网页时，如果遇到喜欢的字体却不知道名称，传统做法是右键检查元素、展开 Computed 面板查看 font-family，至少需要四五步操作。该工具将这一流程压缩为一次鼠标悬停。
目标用户覆盖面较广，主要包括以下几类人群：
- UI/UX 设计师：研究竞品网站时，悬停即可获取独特的标题字体名称。
- 平面设计师：用它寻找适合项目的字体，确保品牌视觉风格统一。
- 前端开发：核对线上页面字体与 Figma 设计稿是否一致。
- 测试人员：验证应用中字体样式、字号是否符合需求文档。
- 营销人员：分析竞争对手广告页面的字体选择。
核心能做什么
点击文本后，提示框会显示字体家族、样式（常规/斜体）、字重（400/700）、字号、行高和十六进制颜色代码，覆盖了网页字体的常用属性。该扩展支持识别 Google Fonts 和 Adobe Fonts（Typekit）两大主流字体服务，这两类字体在中文站点和海外站点都较为常见。
一个关键差异在于，WhatFont 显示的是实际渲染的字体，而非 CSS 中声明的字体。例如，CSS 中写的是 Helvetica，但用户系统未安装该字体、回退到 Arial，那么工具会显示 Arial。这对排查字体回退问题非常实用，能直接看出用户实际看到的效果与设计师预期是否一致。
免费使用与已知限制
WhatFont 完全免费，无水印、无积分、无导出费用。作为独立的浏览器检查工具，它不与 Figma、Adobe XD 等设计软件同步数据。识别结果只能手动复制粘贴，无法一键导入设计工具。此外，对于通过图片或 Canvas 渲染的文本（如海报图、Canvas 绘制的文字），该扩展也无法识别，这类内容需要借助 OCR 或图像识别工具。
实际使用中，还有以下几个常见问题：
- 加载不稳定：Chrome 网上应用店评论中常有「经常出现加载问题」的反馈，需要刷新页面或重启扩展。
- 依赖网络：无法离线工作，断网环境会失效。
- Safari 兼容性：在 Safari 浏览器中，元素带有
transform等 CSS 属性时会出现闪烁。 - Canvas/图片文本无法识别：该扩展依赖 DOM 和 CSS 渲染信息，对位图或 Canvas 文本无效。
vs 浏览器开发者工具
浏览器自带的开发者工具（F12 → 检查元素 → Computed）能够查看完整的 CSS 属性链，适合前端工程师排查字体加载优先级、@font-face 配置等深度问题。但它的操作步骤相对繁琐，且需要一定的技术背景。
WhatFont 走的是另一条路——所见即所得、一键悬停，对设计师和非技术用户更友好。日常灵感收集和快速识别字体时，用它足够；需要排查字体加载失败或分析 @font-face 配置时，开发者工具更合适；而纯位图中的字体识别，则需要 WhatTheFont 这类图像识别服务。
