网站用的是什么字体?在 Chrome 里查证的三种方法

你打开一个排印漂亮的页面,问出那个最自然的问题:这个网站用的是什么字体?诚实的查法有三种,速度和准确度差别很大——主要因为一个几乎所有速答都跳过的细节:网站声明的字体和你的浏览器渲染的字体,常常不是同一个。

声明 vs 渲染:每个 CSS 答案里的陷阱

像 font-family: "Neue Haas", Arial, sans-serif 这样的规则是一张愿望清单,不是答案。如果第一个字体族你的机器上没有、页面也没把它作为 web font 加载,浏览器就会沿着列表悄悄下滑——访客读到的可能是 Arial,而样式表暗示的是更讲究的东西。所以真正的问题不是“CSS 写了什么”,而是“我屏幕上实际渲染出的是哪个字体族”。

方法一:Chrome DevTools

右键文字,选择“检查”,再打开 Computed 面板。font-family 的值显示声明的字体栈,滚动到面板底部,还有一小节“Rendered Fonts”给出真正被使用的字体族。它很精确——也很慢:一次一个元素,深入三层面板,每对一个标题好奇一次,就得重来一遍。

方法二:截图字体匹配服务

上传截图的服务把字母形状与字体库比对。当字迹本身就是图片时——logo、海报、JPEG 横幅——它们是正确的工具,因为那里没有 CSS 可读。但对真实文本,它们是在事实唾手可得的场合下做视觉上的猜测。

方法三:用字体检查器悬停文字

Font Finder 直接从页面的计算样式里读答案。点击工具栏图标,按下检查此页面的字体,再悬停任意文字:提示框显示实际渲染的字体族,连同字重和字号。点击文字可钉住一张详情卡,列出完整字体栈——渲染字体已标出,web font 有标记——并把这一切复制成可直接粘贴的 CSS。这个扩展没有 host 权限:检查器只经 Chrome 的 activeTab 授权注入你调用它的那个标签页,不发任何网络请求,按 Esc 后页面原样恢复。

该用哪一种?

对真实文本,悬停检查用一小部分的功夫给出 DevTools 级的准确度,还在同一眼里回答后续问题——字重、字号、web font 还是系统字体。对烙进图片的字迹,用匹配服务,并把它的答案当作待验证的线索。无论哪种,都别信任何只会复述 CSS 字体栈第一个名字的答案:那是设计师想要的,不一定是任何人真正看到的。