免费工具，无需注册
这个网站用的是什么字体？
粘贴网址，查看网站使用的字体，包括字重、字号和每种字体的使用位置。免费，无需注册。看看实际示例，比如 Anthropic 的字体和 Airbnb 的字体，或者了解 DESIGN.md 还能提供什么。
在代码中使用这些字体
查找器会给出字体族名称、字重以及每种字体用于哪些文字。要复用它们，每个字体族只加载一次，为每个角色设一个 CSS 变量，并且始终在字体栈末尾加上后备字体，这样字体下载期间或加载失败时，文字仍能正常显示。
1. 加载字体。如果是 Google Fonts 字体族，添加它的 <link> 标签或使用 next/font/google，并且只请求查找器列出的字重。如果是商业字体，请从字体厂商购买网页授权，并用 @font-face 提供字体文件。
2. 为角色命名。每种用途一个变量：display 用于标题，body 用于正文，mono 用于代码。把字体族名称换成你找到的那些。
:root {
--font-display: "Inter Display", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }3. 在 Tailwind 中使用。同样的字体栈会变成 font-display、font-sans 和 font-mono 工具类。
/* app.css, Tailwind CSS v4 */
@theme {
--font-display: "Inter Display", "Inter", system-ui, sans-serif;
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}字体族只是字体系统的一半。每一级的字号、行高和字间距都在 DESIGN.md 的字体排版章节中，你的编程智能体可以把它们应用到每个页面。
常见问题
字体查找器常见问题
关于免费工具“网站字体查找器”的简短解答。
它会在真实浏览器中打开页面，读取每段可见文字的计算字体：也就是浏览器实际渲染的字体族，以及它的字重和字号。然后按字体族分组，并按使用这些字体的文字量排序。
不可以。字体是需要授权的软件，网站的授权通常只覆盖该网站本身。如果字体族在 Google Fonts 上，你可以在那里免费获取；否则请查找它的字体厂商，为自己的用途购买授权。
它只读取你输入的那一个页面，最多列出八个字体族。它只能看到这个页面向首次访问者显示的文字：需要登录才能看到的文字、拦截自动化浏览器的页面，以及以图片或 SVG 绘制的文字都不会被读取，因此这些字体不会出现。
支持。页面渲染的任何网页字体都能被识别，无论它来自 Google Fonts、Adobe Fonts 还是网站自己的服务器。Google 字体会以真实字形预览；其他字体则以后备字体显示。
可以，一次查看一个元素。在 Chrome 或 Edge 中，右键点击文字，选择“检查”（Inspect），然后在“计算样式”（Computed）标签页中滚动到“渲染的字体”（Rendered Fonts），那里会显示实际绘制的字体。在 Firefox 中，查看器（Inspector）里的“字体”（Fonts）面板会列出所选元素的字体，以及页面加载的所有字体。
这个工具只列出字体。Design Extractor 生成的 DESIGN.md 涵盖网站的颜色、完整的字号层级、间距和组件规则，全部放在一个你的编程智能体可以遵循的文件中。