字体族和已加载的字重
知道需要哪些变体，而不只是名字
字体排印
网站用了什么字体，许可证和字号层级一并告诉你
Smart Design Inspector 显示网站使用的字体、字重、加载来源（Google Fonts、Adobe Fonts 或网站自己的服务器）、许可证，以及页面的字号层级：每种样式的字号、字重和行高。
字体、来源、许可证和字号层级：永久免费
字体 · yourclient.example
- Inter300 · 400 · 500 · 600Google FontsOFL
- Playfair Display400 · 400 斜体 · 700Google FontsOFL
- JetBrains Mono400自托管OFL
- H164 px · 500 · 1.04
- H236 px · 500 · 1.1
- H317 px · 500 · 1.3
- 正文16 px · 300 · 1.55
- 按钮15 px · 500 · 1
01
如何查看网站用了什么字体
3 步- 01
安装 Smart Design Inspector，然后打开目标网站。
- 02
点击扩展图标，选择字体。
- 03
即可看到字体族列表及其字重和来源。鼠标悬停在文字上，可查看它的确切样式。
不用扩展
不用扩展也能查：右键点击文字，选择检查，在样式面板中找到 font-family。问题是 font-family 只告诉你请求的是哪种字体，并不说明它是否加载成功、来自哪里、用的是什么许可证。
02
在本页直接试用
无需安装一个示例网站加上字体面板，无需安装任何东西。鼠标悬停在文字上，或在列表中选择，即可看到它的字体族、字重、字号、行高、来源和许可证。
选择一个元素
Smart Design Inspector · 字体h1.hero-title
- 字体族
- —
- 字重
- —
- 样式
- —
- 字号
- —
- 行高
- —
- 字间距
- —
- 来源
- —
- 许可证
- —
页面中的字体族
—
示例网站 · 数值读取自本页
03
不止是字体名称
4 项信息来源：Google Fonts、Adobe Fonts 或自托管
判断可以免费使用，还是需要购买
许可证
Google Fonts 均为 OFL。其他字体读取字体文件自身声明的许可证
字号层级
H1 到 H6、正文和按钮，含字号、字重、行高和字间距
要复刻一种风格，需要的是字号层级，而字体类扩展只会逐个字母地看。使用 Pro 可以把它导出为 Tailwind 或 CSS 变量：提取设计系统。
| 免费€0永久 | Pro€49一次性付款 | |
|---|---|---|
| 页面字体：字体族、字重、字号、来源和许可证 | ||
| 字号层级：每种文字样式的字体、字号、字重、行高和字间距 | ||
| 将文字样式导出为 Tailwind v4 @theme、CSS 变量或 DESIGN_SPECS.md | — | 抢先体验免费 |
05
它不做的事
限制它不下载付费字体，只告诉你许可证和获取渠道。如果字体采用免费许可证，你可以自行下载。它也不能从图片中识别字体，这类需求可以用 WhatTheFont 等工具。
免费吗？
是的。查看字体、来源、许可证和字号层级永久免费。
能识别 Adobe Fonts 吗？
能。根据字体的加载地址识别来自 Adobe 的字体。
如果网站用的是系统字体呢？
扩展会提示没有加载任何网页字体，并显示声明的字体族。
找到的字体我可以用吗？
取决于它的许可证。Google Fonts 可用于任何项目。商业字体即使其他网站在用，也需要购买。
图片里的文字也能识别吗？
不能。它读取的是页面上的文字，而不是图片里的文字。
支持哪些浏览器和操作系统？
从 1.0 版起支持 Windows、Mac 和 Linux 上的 Chrome、Edge、Brave、Arc、Opera 和 Vivaldi。扩展由浏览器运行，而不是由操作系统运行，所以在各处表现一致。代码已为 Firefox 和 Safari 做好准备，无需重写。开发期间，内容可能会有变化。
候补名单
成为首批试用者
Smart Design Inspector 正在开发中。留下你的邮箱，它在 Chrome 网上应用店上线当天我们会通知你，并在抢先体验期间免费开放 7 项 Pro 功能。
发布当天一封邮件，之后很少打扰 · 一键退订