使用 Chrome & Firefox DevTools 查找字体

浏览器 DevTools 可以让您检查任何元素上渲染的确切字体。以下是使用方法 - 以及何时 URL 扫描器是更快的选择。

Chrome DevTools - 已渲染字体

  1. 1右键单击任意文本并选择"检查"（或按 Ctrl+Shift+I / Cmd+Option+I）。
    Chrome 右键上下文菜单，"检查"以蓝色高亮显示
    查看完整截图
    右键单击任意文本，然后点击"检查"
  2. 2Chrome 打开元素面板，已点击的元素在 DOM 树中高亮显示。
  3. 3在右侧面板中，点击"已计算"标签（"样式"旁边的第二个标签）。
  4. 4在 CSS 属性下方滚动到"已渲染字体"部分。
    Chrome DevTools 已计算标签显示已渲染字体：来自 woff2 文件的 Inter Variable
    查看完整截图
    "已计算"标签 - 滚动到"已渲染字体"查看活跃字体
  5. 5您可以看到浏览器使用的确切字体、加载的源文件以及从中绘制的字形数量。

Firefox DevTools - 字体标签

  1. 1右键单击任意文本并选择"检查元素"（或按 F12）。检查器面板将在底部打开。
  2. 2在检查器右侧面板（通常显示规则和已计算的位置）点击"字体"标签。
  3. 3左侧列出了页面上加载的每种字体。点击字体名称可查看样本、字重范围、格式和源 URL。
    Firefox DevTools 字体标签 - 选中 Inter Variable，显示样本和详情
    查看完整截图
    Firefox 字体标签 - 页面所有字体列在左侧，详情在右侧

DevTools 方法的局限性

DevTools 非常适合检查单个元素，但不能提供页面加载的所有字体的完整清单。需要手动点击每个文本元素。如需完整审计 - 请在下方粘贴 URL。

更快：通过 URL 扫描整个页面

粘贴任意 URL，一次扫描即可获得使用的所有网络字体的完整列表 - 每个 @font-face 规则、Google Fonts 导入和 CDN 链接。

常见问题

Chrome 中的"已渲染字体"是什么？

"已渲染字体"显示浏览器用来绘制所选文本的实际字体 - 在应用 font-family 回退之后。它可能与 CSS font-family 声明不同。

为什么渲染的字体与 CSS font-family 不同？

font-family 是一个优先级回退列表。如果第一个字体加载失败（缺少文件、CORS 错误），浏览器会转到下一个候选字体。已渲染字体显示实际使用的字体。

我可以用 DevTools 找到页面上的所有字体吗？

Firefox 的字体标签显示页面加载的每种字体。Chrome 需要逐一检查元素。如需完整自动化清单，请使用上方的 URL 扫描器。

URL 扫描器也能检测 Google Fonts 吗？

是的 - 所有字体来源都能检测到：Google Fonts、Bunny Fonts、Fontshare 和自托管的 @font-face 字体。

返回字体检查器