如何获取网页任意文字的 CSS font stack(字体栈)

想复用一个网站的排版,只有字体名字远远不够。你需要完整图景:后备字体栈、精确字重、字号、行高、字距。Chrome DevTools 什么都有,但很分散——字体栈在 Styles 面板,解析后的值在 Computed,每个属性都要手动复制。Font Finder 把这一切压缩成一次悬停加一次点击。

固定你要抄的那段文字

点击 Font Finder 图标,按 Inspect,悬停文字。提示框确认你落在正确的元素上之后点击它,详情卡片就会固定住,不用追着光标读。

读完整字体栈——胜出者已标出

卡片按页面声明的原样显示完整 font-family 列表,并标出浏览器实际渲染的那个字体族。借用字体栈时这个区分很关键:如果前两个名字只存在于设计师的电脑上,你的访客一直看到的其实是第三个。Font Finder 还会告诉你渲染字体是不是页面加载的 web font,让你清楚只抄字体栈够不够,还是连字体文件也得拿到。

一键复制可直接粘贴的 CSS

Copy CSS 按钮把一个声明块写进剪贴板:带完整加引号字体栈的 font-family,以及 font-weight、font-size、line-height、letter-spacing,和十六进制的文字 color。这个块对默认值很诚实——计算结果为 normal 的属性直接省略,不拿来充数,你粘贴的只有元素真正设置的内容。

字号可选 px 或 rem

如果你的代码库用 rem,在 Font Finder 设置里切换尺寸单位,复制出的 font-size 会按页面根字号换算,不用心算除以 16。页面用相对值写行高时,行高也按相对字号表达,粘进你自己的设计后在任何字号下都能正确缩放。

不用 DevTools,也不上传

一切都发生在你的机器上。扩展不发网络请求,也没有 host 权限——检查器只存在于你启动它的标签页,Esc 即可移除。对每天都要做这套动作的设计师和开发者来说,这就是全部卖点:从“这排版真不错”到 CSS 进样式表,不超过十秒。