字体搭配浏览器
浏览精选的 Google 字体搭配，用你自己的示例文字实时预览，并复制可直接使用的 @import 与 font-family CSS。
正在加载工具…
字体搭配浏览器 — 从一份精心挑选的标题字体加正文字体组合中选择，看它们一同渲染的真实效果。输入你自己的标题和段落，在真实语境中判断搭配是否合适，然后复制可直接粘贴的 CSS 代码片段。字体文件由你的浏览器直接从 Google 公开的 Fonts CSS API 获取；只有所选字体会离开你的设备，示例文字和设置都不会发送到我们的服务器。
字体搭配浏览器 是什么？
字体搭配浏览器是一款免费的浏览器内工具，面向想要快速找到协调的标题加正文字体组合，又不愿在字体库里反复翻找的网页设计师、开发者和内容创作者。它内置一组经过验证的 Google 字体搭配，例如 Playfair Display 配 Source Sans 3，或 Poppins 配 Inter，并在实时预览中呈现每一种组合。在设置中选择一个搭配，输入你自己的示例标题和正文，预览会即时更新。满意之后复制生成的 CSS，其中包含一行用于 Google 字体样式表的 @import，以及标题和正文的 font-family 规则。可用它快速制作落地页、博客主题、幻灯片或设计系统的原型，或只是了解哪些字体彼此相配。
如何使用 字体搭配浏览器
- 打开设置，从精选的 Google 字体组合列表中选择一个搭配。
- 稍候片刻让字体从 Google 的 Fonts CSS API 加载完成；字体到位后预览会切换为新的字形。
- 输入你自己的示例文字，用真实词句查看标题和正文字体，或留空以使用默认示例。
- 阅读关于外部字体加载的提示，了解字体来自 fonts.googleapis.com。
- 复制生成的 CSS 片段——@import 行以及标题和正文的 font-family 规则——并粘贴到你的样式表中。
示例
优雅的刊物风格搭配
输入
搭配：Playfair Display + Source Sans 3
输出
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');简洁的产品界面搭配
输入
搭配：Poppins + Inter
输出
h1, h2, h3 { font-family: 'Poppins', serif; font-weight: 600; }用你自己的文案预览
选择一个搭配，输入真实的标题（比如你的产品名）和一句营销文案，预览会用真实字体渲染二者，让你在确定前判断对比度与节奏。
常见问题
- 包含哪些字体搭配？
- 一组精选的热门 Google 字体标题加正文组合，包括 Playfair Display + Source Sans 3、Montserrat + Merriweather、Poppins + Inter、Lora + Roboto、Oswald + Open Sans、Raleway + Lato、Space Grotesk + IBM Plex Sans，以及 DM Serif Display + DM Sans。在设置中选择其一即可。
- 字体从哪里来？
- 当你选择一个搭配时，你的浏览器会直接从 Google 公开的 Fonts CSS API（fonts.googleapis.com）加载对应的样式表。这是从你的浏览器直接发出的第三方请求；字体不会经过我们的服务器代理。
- 我的示例文字会保密吗？
- 会。你输入的示例标题和正文完全保留在你的浏览器中，仅用于渲染本地预览。它们绝不会被发送到任何地方，生成的 CSS 也只包含搭配的字体名称——不含你的文字。
- 复制的 CSS 具体包含什么？
- 一行 @import，用于引入两种字体的 Google 字体样式表，随后是 font-family 与 font-weight 规则：一组用于 h1/h2/h3 标题，一组用于正文。粘贴到样式表顶部即可。
- 为什么预览会有片刻空白或未应用样式？
- 字体必须先从 Google 下载才能渲染。在样式表到达之前会显示简短的加载提示；如果加载失败（例如离线），会显示错误提示，预览将回退到浏览器的默认字体。