网页字体识别:在 Chrome 里查出网站用的是什么字体

你在某个网站上看到一款喜欢的字体,想知道它是什么。常规路径都很慢:截图识别工具靠猜,还经常猜错;论坛发帖要等几小时;Chrome DevTools 得对每个元素右键、检查、再翻 Computed 面板。其实有条更快的路,还能回答 DevTools 很难回答的那个问题:CSS 字体栈里真正渲染出来的是哪一个。

在当前标签页启动检查器

点击 Font Finder 图标,按下 Inspect。这个扩展没有 host 权限:检查层只经 Chrome 的 activeTab 授权注入你调用它的那个标签页,按 Esc 关闭后即消失。

悬停任意文字识别字体

把光标移到标题、段落或按钮文字上。一个跟随指针的提示框会显示其下文字的字体族、字重和字号。不用选中、不用配置——悬停就是全部操作。

认准渲染字体,而不是字体栈里的第一个名字

像 font-family: Futura, Helvetica, sans-serif 这样的 CSS 规则,只说明设计师想要什么。如果 Futura 没有安装,浏览器会悄悄退到下一个名字。Font Finder 实测浏览器真正使用了栈里的哪个字体族并报告它,而且当胜出者是页面加载的 web font 而非系统字体时会明确标出。这就是“识别字体”和“猜字体”的区别。

固定卡片看完整细节

提示框里出现有意思的内容时,点一下文字就能把详情卡片固定在原地。卡片列出完整字体栈并标出实际渲染的那一个,外加字重、样式、字号、行高、字距和颜色——还有一个按钮,一键把这一切复制成可直接粘贴的 CSS。

一切都留在你的机器上

字体检查完全在本地运行。Font Finder 不发任何网络请求,不需要账户,也没有付费档。按 Esc 后,检查器会从页面上彻底移除。

和截图识别服务相比,悬停不只是更快——而是精确。你读的是页面自己的计算样式,答案是事实本身,而不是视觉上的最佳猜测。