Computed 中的 font-family 才是浏览器最终渲染所用字体，它已综合继承、回退、系统支持及加载状态；Styles 中的声明可能被覆盖或失效。
直接看“Computed”里的 font-family，不是“Styles”里写的那个——它可能被覆盖、回退或压根没生效。
为什么 Styles 里的 font-family 不可靠
你在“Styles”面板看到的 font-family: "PingFang SC", "Helvetica Neue", sans-serif 只是当前选中元素上声明的 CSS 规则，不等于浏览器最终渲染用的字体。常见干扰包括：
- 父级设置了更通用的
font-family，而子元素没显式覆盖，实际继承的是父级值 - CSS 优先级更高的一条规则（比如
body * { font-family: "Arial" !important; }）在别处生效了 - 系统里根本没装
"PingFang SC"，浏览器跳过它用了"Helvetica Neue"，但“Styles”里仍显示原始声明 - 字体加载失败（如网络中断、404 的
@font-face），回退到默认字体，但源码里那行还在
Computed 标签页才是真实答案
切换到开发者工具的“Computed”选项卡，搜索 font-family，右侧显示的才是浏览器最终选择并渲染该文字所用的字体名称（例如 "Helvetica Neue" 或 Times New Roman）。这个值是计算后确定的，已考虑继承、回退、系统支持、加载状态等全部因素。
操作要点：
- 右键文字 → “检查”，确保高亮的是你真正想查的 DOM 节点（不是外层容器）
- 在“Computed”中找
font-family行，注意它旁边有个小方块，点击可预览该字体效果 - 如果看到多个字体并列（如
"Inter", "Segoe UI", system-ui），说明前面的都不可用，最终用的是最后一个有效项 - 若显示为
initial或空，说明该节点未设置任何字体，完全依赖浏览器默认（通常是Times New Roman或系统默认衬线体）
用 JavaScript 批量提取可见节点的字体
需要自动化分析整页字体？别靠肉眼点，用控制台跑一段脚本。关键不是“所有元素”，而是“真正可见且含文本的节点”：
const nodes = Array.from(document.querySelectorAll('*'))
.filter(el => el.offsetWidth > 0 && el.offsetHeight > 0)
.filter(el => getComputedStyle(el).fontFamily && el.textContent.trim())
.map(el => ({
tag: el.tagName.toLowerCase(),
fontFamily: getComputedStyle(el).fontFamily,
fontSize: getComputedStyle(el).fontSize
}));
<p>console.table(nodes.slice(0, 20));</p>
这段代码会过滤掉 display: none、visibility: hidden、无尺寸、无文本内容的节点，只保留实际渲染出文字的元素及其最终字体。注意：getComputedStyle(el).fontFamily 返回的就是“Computed”里看到的那个值，不是 CSS 源码。
字体加载失败时的典型表现
自定义字体（@font-face）加载失败，最常被忽略的现象不是“字体变了”，而是“文字闪一下再变”或“空白一瞬”。这时：
- 打开“Network”标签，筛选类型为
font，刷新页面，看是否有 404 或 stalled 状态 - 检查
@font-face中的src路径是否正确，.woff2 文件是否真在服务器上 - 确认
font-display值：设为swap会让 fallback 字体先显示；设为block则可能白屏等待几秒 - 即使 Network 显示字体请求成功，也要进“Computed”确认
font-family是否真用了你定义的名字——有时名字拼错（比如大小写不一致）会导致回退
真正决定字体显示效果的，永远是 getComputedStyle 的结果，而不是你写了什么、路径对不对、扩展装没装。别信声明，信计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
