你是不是经常遇到这样的场景：浏览一个设计精美的网站，却被某个字体深深吸引，却不知道它的名字？别急，What Font这款浏览器插件就是你的解药。它能在几秒钟内告诉你任何一个网页上的字体家族、粗细、大小、颜色、行高等所有细节。更棒的是，它完全免费且操作极其简单，不需要任何技术背景。

一、What Font能做什么？

激活插件后，只需将鼠标悬停在任意文字上，就会自动弹出包含以下信息的浮窗：

  • 字体家族（Font Family）：比如“Helvetica Neue”、“Roboto”
  • 字体样式（Style）：常规、斜体等
  • 字重（Weight）：从Thin到Black的具体数值
  • 字号（Size）：精确的px或rem值
  • 行高（Line Height）
  • 颜色（Color）：十六进制或rgb值

如果你是UI设计师、前端开发者、平面设计爱好者，或者经常需要参考竞品、收集灵感，这款插件能帮你省下大量手动检查样式的时间。对比其他同类工具如Fonts Ninja或Page Ruler，What Font的优势在于轻量、无广告、不拖慢浏览器，且信息呈现更直观。

二、如何使用？三步搞定

  • 第一步：在Chrome网上应用店或Edge扩展商店搜索“What Font”安装。
  • 第二步：进入目标网页后，点击浏览器右上角的What Font图标（一般是个带“f”的图标）激活插件。
  • 第三步：将鼠标悬停在你感兴趣的文字上，浮窗自动显示字体详情。点击文字还能锁定信息以便仔细查看。用完记得点击右上角的“Exit What Font”按钮退出。

整个过程不到10秒就能获取完整字体参数，相比手动查看网页源代码或使用浏览器开发者工具，效率提升了不止一个数量级。

三、谁最需要它？

  • 网页设计师：快速识别竞品的字体搭配，提升设计复刻能力
  • 前端开发者：无需打开控制台，一键获取CSS字体属性，方便调试
  • 自媒体与内容创作者：发现好看的英文字体用于海报、封面设计
  • 普通用户：满足对字体知识的好奇心，轻松学习排版美学

很多用户反馈，用What Font识别到的字体，能直接去Google Fonts或Adobe Fonts搜索下载，实现从“看见”到“使用”的闭环。它不像某些插件需要付费解锁高级信息，所有核心数据完全开放。

四、与其他插件的对比

市场上类似插件还有Font Finder和Identify Font。Font Finder能额外显示段落间距，但界面不如What Font清爽；Identify Font需要每次手动点击元素，不如悬停即显快捷。而What Font在兼容性上表现更好，支持最新Chrome、Edge、Firefox等主流浏览器，且对动态加载的字体（如网页通过JavaScript插入的文本）也能准确识别。

不过注意一个小缺点：What Font目前不支持中文网站字体识别（Web Font除外），如果你遇到的是用图片代替文字的中文字体，它无法识别——这时需要搭配图片识别字体工具（如WhatTheFont网站）使用。

五、总结推荐

如果你经常和网页字体打交道，What Font绝对是一款提升工作效率的神器。它的设计哲学就是“快、准、简”，没有多余功能，正是这种专注让它成为众多设计师装机必备的插件之一。无论是学习排版规范还是捕捉设计灵感，都值得一试。