立即试用 Font Finder:点击任意文字即可查看字体名称、字号、字重和颜色,一键复制 CSS。
有没有遇到过这样的情况:打开一个排版漂亮的网站,忍不住想知道"这里用的是什么字体?"Font Finder 把这个疑问变成了一次点击。把光标移到任意元素上,点一下,完整的字体报告就直接在页面上展开。不用打开 DevTools,不用猜,也不用把截图上传到任何地方。
这个 Chrome 扩展读取的是浏览器渲染页面时真正应用的样式,所以你拿到的是确切在用的字体,而不是根据图片作出的推测。
🔥 Font Finder 的主要功能:
✅ 一键识别 - 在任意网站上点击任意文字,立刻知道用的是什么字体。
✅ 完整报告 - 字体族、字号、字重、行高和颜色集中在一个面板里。
✅ 复制 CSS - 把所选文本元素的全部样式以干净、可直接粘贴的格式带走。
✅ 一键复制 - 用一个按钮复制字体名称或 HEX 颜色值。
✅ 浅色与深色主题 - 报告面板在任何光线下都保持易读。
✅ 轻量且尊重隐私 - 不跟踪,不收集数据。
💡 使用方法:
1️⃣ 点击"添加至 Chrome"安装扩展。
2️⃣ 打开你想查看的网站。
3️⃣ 点击扩展图标,或用右键菜单开启识别模式。
4️⃣ 在页面上移动光标 - 光标下方的元素会高亮显示。
5️⃣ 点击文字查看报告。按 ESC 或点击面板外部即可关闭。
📌 报告会显示这些内容:
▸ 字体族 - 浏览器实际使用的字体,网页字体或系统字体都能看到。
▸ 字号 - 让你立刻在自己的 CSS 里用上同样的数值。
▸ 字重及其易读的名称 - 400 (Regular)、700 (Bold) 等等。
▸ 行高 - 许多同类工具不知为何都不显示的那个数值。
▸ 颜色 - 一个色块样本和可直接复制的 HEX 代码。
🎨 按你习惯的方式复制 CSS
按下"复制 CSS"按钮,所选文本的整段样式就会以熟悉的格式进入剪贴板。粘贴到你的样式表或组件里,接着干活就行。
正是这个按钮,把一个简单的字体识别工具变成了工作流程中真正管用的一环。
🌗 浅色与深色主题
报告两种主题都有。无论你在做明亮的营销页面还是深色的后台面板,面板都一样清楚易读。开始之前什么都不用设置。
🔒 轻巧、快速、尊重隐私
- 不收集数据 - 你查看的一切都留在自己的浏览器里。
- 占用极小 - 扩展消耗的资源很少,不会拖慢页面加载。
- 除了公开网站,本地文件和 localhost 上的项目同样支持。
🎯 Font Finder 适合谁
1) 需要快速拿到真实 CSS 数值的网页开发者。
2) 在 Figma 里重新搭建参考网站的 UI/UX 设计师。
3) 刚入门前端、想弄明白网页排版在实际中如何运作的人。
4) 需要核对品牌字体是否处处一致的市场和内容人员 - 网站页面上是这样,广告素材里也是这样。
5) 在网上看到好看的文字、想知道那个网站用了什么字体的所有人。
📍 使用场景
• 不开 DevTools 就还原竞品的排版尺度。
• 核对客户网站是否真的在所有页面都用了品牌字体。
• 几秒钟内取到颜色和字体名称,放进情绪板。
• 弄清楚为什么某个标题看起来比别的更粗。
• 识别页面上加载的 Google Fonts 和其他字体。
❓ 常见问题
🔹 Font Finder 是什么?
- 一个 Chrome 扩展,能让你知道网页上任意文字用的是什么字体:字体族、字号、字重、行高和颜色,一次点击全部呈现。
🔹 怎么查一个网站用的是什么字体?
- 安装扩展、打开它,然后点击文字。Font Finder 会读取浏览器渲染时应用的样式,并立即显示结果。
🔹 能识别 Google Fonts 和网站自己托管的文件吗?
- 可以。扩展显示的是浏览器真正在用的字体,包括来自 Google Fonts、Adobe Fonts 以及网站自有文件的字体。
🔹 样式可以复制吗?
- 可以 - 你能复制名称、HEX 颜色值,也能按"复制 CSS"一次性带走整段样式。
🔹 扩展会收集我的数据吗?
- 不会。这个工具在浏览器里本地运行,什么都不收集。
💬 大家为什么选择 Font Finder
➤ 立刻出结果 - 一次点击,不必在 DevTools 里翻找数值。
➤ 真实的 CSS 数值,而不是从图片猜出来的字体名。
➤ 不需要账号,也没有强制注册。
➤ 处处可用 - 公开网站、staging 环境、localhost 和本地 HTML 文件。
➤ 帮你快速认出字体,又不打扰你干活。
📌 不用 DevTools,不用截图,不用上传。启动扩展,点击文字,答案就在眼前。
👆 点击"添加至 Chrome",现在就开始在任意网站上识别字体。



