字体搭配浏览器
为标题和正文搜索 48 款 Google 字体，调节字重、字号、行高与字距，随机搭配，并复制 @import、link 或 Fontsource 版 CSS。
正在加载工具…
字体搭配浏览器 — 从可搜索、可按类别筛选的 48 款热门 Google 字体目录中，分别为标题和正文挑选字体，再逐一微调每个角色的字重、字号、行高和字距，用你自己的文字实时查看效果。点击随机搭配来发现新组合，并以 CSS @import 规则、HTML link 标签或 Fontsource npm 导入的形式复制可直接粘贴的代码片段。只有你选中的两款字体会由浏览器直接从 Google 公开的 Fonts CSS API 获取；示例文字和设置都不会离开你的设备。
字体搭配浏览器 是什么？
字体搭配浏览器是一款免费的浏览器内工具，面向想要协调的标题加正文字体组合、又不愿翻遍字体库的网页设计师、开发者和内容创作者。两个相互独立的可搜索选择器让你按衬线、无衬线、展示或等宽筛选 48 款精选 Google 字体，并为每个角色单独选字；同时每个角色的控件可设置字重、字号、行高与字距。实时预览会用真实字体呈现你的标题和段落，随机按钮则在你需要灵感时给出随机组合。满意后，以你偏好的格式复制生成的 CSS——@import 规则、HTML link 标签或 Fontsource 风格的 npm 导入——并用于落地页、博客主题、幻灯片或设计系统。
如何使用 字体搭配浏览器
- 在标题选择器中按衬线、无衬线、展示或等宽筛选，输入关键词搜索，点击某款字体即可选中。
- 在正文选择器中同样操作，为段落文字挑选一款相配的字体。
- 打开设置，为每个角色设定字重、字号、行高和字距。
- 在示例栏输入你自己的标题和句子，或留空使用默认文字；点击“随机搭配”获取组合灵感。
- 选择输出格式——@import、<link> 或 Fontsource——并把生成的 CSS 复制到你的样式表或项目中。
示例
刊物风标题配易读正文
输入
标题：Playfair Display 700 · 正文：Source Sans 3 400
输出
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');用于纯 HTML 的 link 标签
输入
格式：<link>
输出
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">
供打包工具使用的 Fontsource 导入
把格式切换为 Fontsource，片段就会变成一行 npm 安装命令，加上按字重的导入语句，如 import '@fontsource/inter/700.css';——适用于 React、Vite 或 Next.js 项目。
常见问题
- 如何选择这两款字体？
- 每个角色都有自己的选择器。按衬线、无衬线、展示或等宽筛选目录，输入字体名称的一部分进行搜索，点击结果即可选中。标题和正文各自独立选择，“随机搭配”按钮会为你挑一对随机组合。
- 可以控制字重、字号、行高和字距吗？
- 可以。打开设置，即可分别为标题和正文设定字重、以像素为单位的字号、行高以及字距（单位 em）。每处改动都会同时反映在实时预览和复制的 CSS 中。
- 可以复制哪些输出格式？
- 三种：CSS @import 规则、带 preconnect 提示的 HTML <link> 标签，以及 Fontsource 风格的 npm 导入（npm i @fontsource/… 加上按字重的导入行）。三者都包含针对 h1–h3 和 body 的相同 font-family、字重、字号、行高与字距规则。
- 字体从哪里来，我的文字保密吗？
- 当你选定搭配时，浏览器只会从 fonts.googleapis.com 上 Google 公开的 Fonts CSS API 直接加载这两款字体——这是从你浏览器直接发出的第三方请求，不经过我们的服务器。你的示例文字和设置完全留在你的设备上。
- 包含哪些字体？
- 一组精选的 48 款热门 Google 字体，涵盖衬线、无衬线、展示和等宽——包括 Playfair Display、Merriweather、Inter、Roboto、Poppins、Montserrat、Oswald、Space Grotesk、JetBrains Mono 等。