网页字体识别：查看声明的字体栈

你在某个网站上看到一款字体，想知道它叫什么，于是去找能识别网页文字字体的工具。指向文字，Typography 部分就会显示页面声明的字体族，以及字号、字重和行高。这是声明的字体栈，并不检查浏览器实际渲染的是哪种字体。SuperchargeInspect 读取页面中的实际文字，让你一次就能查看并复制样式。

网页字体识别工具能显示什么

在页面上检查字体样式时，Typography 部分会给出完整信息。指向任意文字，它首先显示字体族，并以列表中的第一个字体族作为标签。点击该标签即可复制 font-family，完整的声明字体栈会复制到剪贴板。

Size 数值显示字号，斜杠后为行高，例如 16 / 24，点击一次即可将两者一起复制为 16px / 24px。Weight 是单独的值，Tracking 显示字间距。

该部分还会显示一个以元素自身字体渲染的样张，作为视觉预览。它只是展示字体外观的预览，并不检查浏览器实际使用了哪种字体。你先查看数值，再点击需要的那些。

声明的字体栈，而非实际渲染的字体

字体栈是页面按顺序请求的字体族列表。第一个字体族会被最先尝试。如果它不可用，浏览器就会按列表依次往下。font-family 值所保存的就是这个列表。

SuperchargeInspect 显示的就是这个列表，它不会检查浏览器最终使用了哪个字体族。因此，如果第一个字体族加载失败、浏览器回退到了另一个，标签仍会显示第一个字体族。网页字体识别工具显示的是声明值，而不是渲染结果。

它只读取页面中的实际文字，不会从图片中识别字体。

复制字体

有几种方式可以获取字体。Family 标签显示第一个字体族，复制时则会得到整个列表。

完整字体栈才是你真正要用的值。把它作为 font-family 粘贴到你自己的 CSS 中，浏览器会按照页面列出的相同顺序解析这些字体族。

键盘操作

按 Alt+Shift+E 开始。用方向键在元素之间移动。按住 Ctrl 再按上或下方向键，可跳到父元素或子元素。在 macOS 上，用 Option 代替 Ctrl。按 Enter 锁定当前元素，按 Esc 返回选取状态或关闭面板。当文字位于难以用鼠标指向的小型嵌套元素中时，跳到父元素或子元素会很有帮助。

隐私

SuperchargeInspect 不发起任何网络请求，也无需账号。只有当你自己把字体栈粘贴到某处时，它才会离开你的设备。

用检查元素工具同时查看颜色和间距。