操作指南 · 字体排印
如何查看网页的字号和行高
简短回答
启动 Font Finder 的检查器并悬停文字:提示框显示实际渲染的字号,在设置里还能把行高加进提示——或点击钉住一张卡片,字号、行高、字间距俱全,可按 px、pt 或 rem 显示。一切都在你的浏览器本地计算。
- 1
打开 Font Finder 的设置,选好字号单位——px、pt 或 rem。
- 2
想在悬停时看到行高,就在迷你提示字段里打开“行高”。
- 3
回到页面,点击 Font Finder 图标,按下“检查此页面的字体”。
- 4
悬停文字——提示显示实际渲染的字号(若已开启,还有行高)。
- 5
点击钉住详情卡,查看行高、字间距和完整字体栈,需要就按“复制 CSS”。
- 6
用完按 Esc;页面原样恢复。
无论是还原设计稿、审计可读性,还是为设计系统留档,有两个数字比什么都重要:页面实际渲染的字号和行高。这两个数照着样式表读都很容易读错,因为它们通常写成相对值——1.25rem、120%、无单位的 1.6——只有落到活的元素上才解析成真实数值。
为什么样式表里的数字会误导
字号会继承并层层相乘:一个 em 值乘的是它父元素解析出的结果,而无单位的行高乘的是这个元素最终得到的字号。值得检查的是计算后的数值,在元素上、在浏览器里。Chrome DevTools 的 Computed 面板里有它——一次一个元素,藏在一次右键加一段滚动之后。
悬停,两个数字一起读
Font Finder 把这件事变成一次扫掠。点击工具栏图标,按下检查此页面的字体,悬停任意文字:一个跟随光标的迷你提示给出字体名、字重和渲染字号。想让行高也出现在悬停提示里?一个开关的事。
钉住卡片看完整度量
点击文字,详情卡就地钉住:字号、行高、字间距、字重、样式、颜色,以及完整的字体族栈——渲染字体已标出。复制 CSS 按钮把它变成可直接粘贴的声明块,数字直接进你的样式表,而不是便利贴。
字号可按 px、pt 或 rem 显示
设置里的单位开关控制字号的报告方式。选 rem,数值会按该页面的根字号换算——不用在脑子里除以 16。当页面把行高定义为相对于字号时,行高保持相对——你带走的比例在自己的设计里换个字号应用时,依然缩放正确。
扫一遍页面,审计整个字号体系
因为读一个值只需悬停,检查整页只要一分钟:从 h1 滑过正文、图注和按钮,不一致的字号阶梯和过挤的行距立刻现形。检查器完全在本地运行,不发网络请求,也不需要 host 权限——它只存在于你启动它的那个标签页,按 Esc 即被彻底移除。