### [WhatFont](https://hello123.com/)

**Published:** 2026-10-19T07:00:00

**Author:** hello123

**Excerpt:** WhatFont 是免费的 Chrome 扩展，鼠标悬停即可显示网页字体的名称、字重、字号、行高和颜色代码，无…

## 安装 WhatFont 的三个步骤

1.  在 Chrome 网上应用店搜索 [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=zh-CN)，点击「添加至 Chrome」并确认安装，整个过程不超过一分钟。
2.  工具栏出现 WhatFont 图标后，点击该图标即可激活字体识别模式。
3.  将鼠标悬停在任意文本上，会显示字体名称；点击文本则可查看字重、字号、行高、颜色等详细信息。完成后点击「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 这类图像识别服务。

{"@context":"https://schema.org","@graph":\[{"@type":"Organization","@id":"https://hello123.com/#organization","name":"Hello123","url":"https://hello123.com/"},{"@type":"WebSite","@id":"https://hello123.com/#website","url":"https://hello123.com/","name":"Hello123","publisher":{"@id":"https://hello123.com/#organization"},"inLanguage":"zh-CN"},{"@type":"WebPage","@id":"https://hello123.com/%E5%AD%97%E4%BD%93%E8%AE%BE%E8%AE%A1/whatfont-292/","url":"https://hello123.com/%E5%AD%97%E4%BD%93%E8%AE%BE%E8%AE%A1/whatfont-292/","name":"WhatFont - 免费 Chrome 字体识别扩展","isPartOf":{"@id":"https://hello123.com/#website"},"inLanguage":"zh-CN"},{"@type":"BreadcrumbList","itemListElement":\[{"@type":"ListItem","position":1,"name":"首页","item":"https://hello123.com/"},{"@type":"ListItem","position":2,"name":"字体设计","item":"https://hello123.com/%E5%AD%97%E4%BD%93%E8%AE%BE%E8%AE%A1/"},{"@type":"ListItem","position":3,"name":"WhatFont - 免费 Chrome 字体识别扩展","item":"https://hello123.com/%E5%AD%97%E4%BD%93%E8%AE%BE%E8%AE%A1/whatfont-292/"}\]},{"@type":"Article","@id":"https://hello123.com/%E5%AD%97%E4%BD%93%E8%AE%BE%E8%AE%A1/whatfont-292/#article","headline":"WhatFont - 免费 Chrome 字体识别扩展","description":"WhatFont 是免费的 Chrome 扩展，鼠标悬停即可显示网页字体的名称、字重、字号、行高和颜色代码，无需注册无需付费，适合设计师和前端开发快速识别网页字体。","publisher":{"@id":"https://hello123.com/#organization"},"inLanguage":"zh-CN","datePublished":"2026-07-11T18:24:03.613Z","dateModified":"2026-07-28T16:22:46.448Z","author":{"@type":"Organization","name":"Hello123 编辑团队"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=zh-CN"},"isPartOf":{"@id":"https://hello123.com/%E5%AD%97%E4%BD%93%E8%AE%BE%E8%AE%A1/whatfont-292/"},"citation":\[{"@type":"CreativeWork","@id":"https://whatfont.en.softonic.com/chrome/extension","name":"softonic.com"},{"@type":"CreativeWork","@id":"https://uiuxshowcase.com/resources/whatfont/","name":"uiuxshowcase.com"},{"@type":"CreativeWork","@id":"https://brendacadman.com/how-to-use-the-whatfont-extension/","name":"brendacadman.com"},{"@type":"CreativeWork","@id":"https://www.reddit.com/r/web\_design/comments/1x8qy3/whatfont\_chrome\_plugin\_the\_easiest\_way\_to/","name":"reddit.com"},{"@type":"CreativeWork","@id":"https://help.waymark.com/en/articles/11519230-how-to-add-whatfont","name":"waymark.com"}\],"about":\[{"@type":"Thing","name":"WhatFont","additionalType":"https://schema.org/Product"},{"@type":"Thing","name":"字体识别","additionalType":"https://schema.org/Service"},{"@type":"Thing","name":"Chrome扩展","additionalType":"https://schema.org/Software"},{"@type":"Thing","name":"网页设计","additionalType":"https://schema.org/Concept"},{"@type":"Thing","name":"前端开发","additionalType":"https://schema.org/Concept"}\]}\]}



---