Aa
查找字体名称
看到喜欢的标题？选中它即可查看字体系列、字重和来源：Google Fonts、Adobe Fonts 或网站自身。
免费 Chrome 扩展
识别网页字体？右键点击查看 CSS
选中任意网页上的文字，右键点击并选择“Inspect font with FontLens”。字体检查器会浮现在页面上，显示字体系列、字号、字重、行高和颜色，并提供可复制的 CSS 和字体下载按钮。
也适用于 Edge、Brave、Opera 和其他 Chromium 内核的浏览器。
概览
- 功能
- 显示所选文字的字体系列、字号、字重、行高、颜色及其他与默认值不同的样式，并可直接复制 CSS。
- 开始使用
- 选中文字，右键点击并选择“Inspect font with FontLens”。只有选中文字时才会显示此菜单项。
- 复制格式
- CSS、SCSS、SASS 或 Tailwind，字号可使用 px、rem、pt 或 em。
- 字体文件
- 点击“Download font”即可从 @font-face 来源获取网页字体。使用前请查看字体许可。
- 适用人群
- 网页设计师、前端开发者、无障碍审核人员和 CSS 学习者。
- 价格
- 免费。无需帐户，没有付费版。
- 数据
- 在浏览器中运行。没有服务器，也不做数据分析。只有你主动下载字体时才会发起网络请求。
- 适用浏览器
- Chrome 及其他可从 Chrome Web Store 安装扩展的 Chromium 浏览器。不支持 Firefox 或 Safari。
- 限制
- 读取网页真实文字的 CSS。无法读取图片、画布或 PDF 中的文字，也不适用于 Chrome 自带页面。
- 版本
- 2.2.0，更新于 2026年10月23日
两步查看网页字体
- 1
选中文字
在任意网页上选择一个标题、段落或按钮标签。
- 2
右键点击
选择“Inspect font with FontLens”。检查器会浮现在页面上，显示字体系列、字号、字重、行高和颜色。
- 3
复制或调整
复制 CSS 或 Tailwind，在实时预览中试试其他字号或颜色，也可以下载字体文件。
这些时候用得上
{ }
对照设计稿
把线上页面的数值与设计文件对比，再复制为 CSS、SCSS、SASS 或 Tailwind 规则。
4.5:1
检查对比度
查看对比度和 AA、AAA 等级，在设计上线前试试更深的文字颜色或更浅的背景。
功能介绍
带参考线的字体样本
显示字体栈中的第一个字体，并标出根据字体本身测量的大写字高、x 字高和基线。
代码片段格式
支持 CSS、SCSS、SASS 和 Tailwind。可复制完整代码或单行内容，并记住上次使用的格式。
自选单位
在输入框和代码片段中使用 px、rem、pt 或 em 显示字号。rem 根据当前网页的根字号计算。
字体来源
标签会显示字体来自 Google Fonts、Adobe Fonts、自托管服务，还是电脑上已安装的系统字体。
对比度检查
显示文字与背景的对比度，以及普通和大号文字的 AA、AAA 等级。调整颜色后结果会同步更新。
下载字体
从 @font-face 来源获取文件，并用字体系列名称命名。如果服务器拦截下载，会在新标签页中打开字体来源。
为什么用 DevTools 查字体这么费时间？
网页会声明一组字体，浏览器使用其中第一个可用字体。想知道实际使用的是哪个，你得打开 DevTools、找到元素、查看 Computed 面板，再去 Network 面板寻找字体文件。字号、字重、行高和颜色还分散在不同位置。
字体透镜会读取所选文字的计算样式，并集中显示字体系列、首个字体样本、各项数值、字体来源和 CSS。它读取网页 CSS，因此无法识别图片里的字体。
数据不会离开浏览器
无需帐户，也没有服务器
字体透镜在浏览器中运行，不做数据分析或跟踪。
只读取你选中的文字
检查器只读取你右键点击的文字样式，不会发送任何网页信息。
四项权限
右键菜单需要上下文菜单权限；打开检查器需要当前标签页和网页访问权限；示例文字、单位和代码格式保存在本地存储中。
Chrome DevTools 与字体透镜
| Chrome DevTools 与字体透镜 | Chrome DevTools | 字体透镜 |
|---|---|---|
| 查看某段文字的字体 | 检查页面、找到元素并打开 Computed 面板 | 选中文字、右键点击、选择一个菜单项 |
| 复制为 Tailwind 或 SCSS | 不支持，需要逐项复制数值 | CSS、SCSS、SASS 或 Tailwind 标签页 |
| 查看字体来源 | 在 Network 面板中查找字体文件 | 标签显示 Google Fonts、Adobe Fonts、自托管或系统字体 |
| 下载字体文件 | 在 Network 或 Sources 中找到并保存 | 点击一个按钮 |
| 检查对比度 | 在 Styles 面板的颜色选择器中查看 | 实时预览旁显示 AA 和 AAA 等级 |
| 价格 | 内置功能 | 免费 |
常见问题
如何识别网页使用的字体？
将字体透镜添加到 Chrome，选中网页上的文字，右键点击并选择“Inspect font with FontLens”。即可查看字体系列、字号、字重、行高、颜色和字体来源。
如何复制网页字体的 CSS？
在检查器中选择 CSS、SCSS、SASS 或 Tailwind 标签页，点击“Copy all”，也可以只复制一行。需要时先将单位切换为 px、rem、pt 或 em。
可以从网页下载字体吗？
如果文字使用网页字体，“Download font”会从 @font-face 来源获取文件。系统字体没有可下载文件。在项目中使用前请查看字体许可。
能识别图片或 PDF 中的字体吗？
不能。它读取网页真实文字的 CSS，因此无法识别图片、画布或 PDF 中的字体。
如何按照 WCAG 检查文字对比度？
预览会显示文字与背景的对比度，以及普通和大号文字的 AA、AAA 等级。更改任一颜色后，等级会更新。
字号可以用 rem 而不是 px 显示吗？
可以。切换为 px、rem、pt 或 em 后，输入框和代码片段都会采用该单位。rem 根据网页根字号计算，你的选择也会被记住。
这是免费的吗？会收集数据吗？
完全免费，无需帐户。没有服务器或数据分析；只有你主动开始下载字体时才会发起网络请求。
支持 Edge、Brave 或 Opera 吗？
大多数 Chromium 浏览器都能从 Chrome Web Store 安装扩展，包括 Edge、Brave、Opera 和 Vivaldi。不支持 Firefox 和 Safari。
