在任何页面上检查字体
悬停并点击文字，即可在元素旁或侧边栏中查看实时字体、大小、粗细、样式和颜色——无需打开 DevTools。
what the font - font finder
识别任意网页元素的字体与 CSS 排版信息——字体族、大小、粗细、行高、字间距、颜色和对比度——无需离开当前标签页即可复制或导出所需内容。
为实时排版而生
功能
关键的排版详情
在一个面板中查看行高、字间距、变换、装饰和对比度（含 AAA/AA 提示）。
一键复制 CSS
复制所检查元素的字体族、颜色或可直接使用的 CSS 代码片段。
在页面上编辑样式
实时调整元素的粗细、大小、间距、颜色等，探索完成后可一键重置。
页面上的全部字体
扫描页面中所有独特的文字样式，在设计系统审查时快速跳转。
导出与 Google Fonts
将排版导出为 SCSS 或 JSON，或打开 Google Fonts 搜索找到的字体族。
简洁设计
关于我们
一款 Chrome 扩展，可显示实时排版信息——字体、大小、粗细、颜色和对比度——让您在任何网页上检查、复制和导出字体。
- —
- 已发布使用总量
- —
- 已验证评价数量
Chrome Web Store
用户评价
示例反馈占位 — 接入后将替换为 Chrome Web Store 真实评价。
★★★★★
“无需打开 DevTools，就能从实时网站获取字体族、粗细和十六进制颜色。”
★★★★★
“在一个面板中复制 CSS 和对比度信息，正是审计时需要的功能。”
★★★★★
“「页面上的全部字体」帮我快速发现落地页中不一致的字体样式。”
三个简单步骤
使用方法
-
安装扩展
从 Chrome Web Store 添加 what the font - font finder，并将其固定到工具栏。
-
开始检查
打开弹出窗口，开始检查，然后悬停并点击页面上的任意文字。
-
复制或导出
复制 CSS、导出样式、打开 Google Fonts，或浏览页面上的全部字体。
安装前的解答
常见问题
如何识别网站上的字体？
安装 what the font - font finder，开始检查，悬停文字并点击，即可打开显示字体族、大小、粗细和颜色的面板。
可以复制所见文字的 CSS 吗？
可以。在面板中可复制字体族、颜色或所检查元素的 CSS 代码片段。
是否适用于所有页面？
适用于普通网站标签页。Chrome 系统页面和部分受限 URL 无法检查。
可以查看页面上使用的所有字体吗？
使用「页面上的全部字体」列出所有独特的可见文字样式，并在详情面板中打开任意一项。
检查时能否修改外观？
可以。编辑元素的粗细、大小、间距、颜色及相关样式，然后重置以恢复原始样式。
从哪里打开 Google Fonts？
当字体族名称可搜索时，在面板中使用 Google Fonts 操作，即可打开该名称的搜索页面。