256 Tools

字体搭配工具 — 精选 Google Fonts 标题与正文组合，实时预览并复制 CSS

按风格筛选

示例语言：

此英文字体不包含中文字形，当前语言的示例文本以您设备的系统字体作参考显示。

标题字体: Playfair Display×正文字体: Inter

精选字体组合(28)

复制 CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Inter', system-ui, sans-serif; }
手动指定字体（可选）

从列表中选择标题或正文字体来覆盖当前组合。

相关外部工具

部分链接为联盟营销链接。

Adobe Fonts字体库MyFonts字体商店Creative Market设计素材商店

相关工具

配色生成器从基础色（HEX）生成互补色、类似色、三角等和谐配色。锁定颜色后重新生成其余，可导出为 CSS 变量、Tailwind 或 JSON。渐变生成器使用多个颜色色标创建线性、径向和锥形 CSS 渐变。调整角度、形状和中心，一键复制 background CSS 或 Tailwind 值。颜色转换在一个界面中互转 HEX、RGB、HSL、HSV 和 RGBA。改动任一数值其余实时联动，一键复制，支持透明度与 WCAG 对比度。图片配色提取在浏览器本地从图片提取主色调与占比（%），无需上传。支持 HEX/RGB，可自定义颜色数量，一键复制或导出为 CSS/JSON。

使用方法

  1. 选择风格标签筛选字体组合，或直接在精选列表中浏览。
  2. 点击一个字体组合，即可看到实时预览。
  3. 编辑预览文字，查看自己的文案效果。清空后恢复默认示例。
  4. 用「随机洗牌」探索新组合，或用「交换」对调标题与正文字体。
  5. 点击星号收藏喜欢的组合，仅保存在浏览器中，不上传。
  6. 选定组合后，点击「复制 CSS」获取导入代码，直接粘贴到项目中。无需注册。

什么是字体搭配？

字体搭配，是为标题和正文选择两款互补字体的过程。合适的组合能建立视觉层次、提升可读性，赋予设计一致的风格气质。两款字体——一款富有表现力，一款中性易读——是黄金法则。

标题与正文字体的角色标题吸引眼球·个性正文易读·中性对比

为每款字体分配角色

标题字体吸引眼球，传递个性。正文字体支撑长时间阅读而不疲劳。因承担不同职责，它们可以来自不同字族。

制造对比

衬线字体配无衬线字体是经典搭配，结构性差异让设计显得精致。避免搭配两款过于相似的字体。

控制在两款以内

通常两款字体就足够了。拿不准时，选一款展示字体作标题，搭配一款高可读性中性字体作正文。

风格标签说明

每个组合有一到三个风格标签，可按感觉筛选（多标签为 OR 逻辑）。也可不筛选，直接用洗牌探索。

现代 / 简约 / 简洁

干净、当代感强。适合 SaaS 产品、作品集、科技类网站。

优雅 / 经典 / 编辑风

精致且经久不衰。适合品牌形象、杂志、博客和高端产品。

友好 / 活泼

温暖亲切。适合个人网站、教育类产品和消费级应用。

科技 / 粗犷

强劲前沿感。适合开发工具、技术文档和初创企业。

功能介绍

精选字体组合库

20 余款手选标题×正文组合，附风格标签和说明。每个组合都确保好用。

可编辑的实时预览

在真实字体中查看示例，还可以改成您自己的文字来验证实际效果。

洗牌与交换

洗牌在当前筛选范围内随机切换组合，交换则对调标题与正文字体。

收藏功能

给喜欢的组合加星收藏，仅存储在浏览器中，不上传到服务器。

一键复制 CSS

生成 Google Fonts 引入和 font-family 声明，可直接粘贴。支持 CSS 变量和 Tailwind 格式。

使用场景

确定网站标题和正文字体

按风格标签筛选与品牌调性匹配的组合，复制 CSS 直接粘贴到样式表。

演示文稿字体选择

帮您找到合适的字体组合，然后在 Figma、PowerPoint 或 Keynote 中安装同款字体。

直接粘贴到 CSS 或 Tailwind

包含 Google Fonts 引入和 font-family 声明。Tailwind 格式可获得开箱即用的 fontFamily 配置块。

中文、日文、韩文显示说明

本工具大多数组合使用仅支持拉丁字符的 Google Fonts，不包含中日韩字形。

  • 切换到「英文（Latin）」模式，可正确查看字体的拉丁字符效果。
  • 在「中文」模式下，预览回退到设备系统字体，并显示注释说明该字体不包含中文字形。
  • 列表中提供了适合中文用户的专属组合（使用系统 CJK 字体），在中文页面优先显示。
  • 本工具最适合用于拉丁文字网站、标志和幻灯片的字体决策。

字体与隐私

  • 预览字体由本站提供，浏览器不会连接 fonts.googleapis.com，您的 IP 不会发送给 Google。
  • 示例文字和收藏记录仅保存在浏览器中（localStorage），不上传到任何服务器。
  • 复制的 CSS 中的 @import URL 供您的网站使用，本页面不会执行该请求。
  • 所有字体采用 SIL OFL 1.1 开源协议，允许商业使用。使用前请在 Google Fonts 页面确认条款。

常见问题

如何选择好的字体搭配？

关键在于制造对比：将衬线与无衬线字体搭配，或展示字体与高可读性正文字体组合。坚持两款字体，用风格标签缩小范围。

这些字体可以免费商用吗？

所有字体均采用 SIL OFL 1.1，允许商业使用。在客户项目中使用前，请在 Google Fonts 确认最新条款。

CSS 可以直接粘贴到项目中吗？

可以。生成的 CSS 包含 Google Fonts 引入和 font-family 声明，粘贴到样式表即可。也支持 Tailwind 格式。

我输入的文字会被上传吗？

不会。所有处理均在浏览器本地进行，示例文字和收藏不会上传，预览字体由本站提供不连接 Google 服务器。

能查看中文字体搭配效果吗？

大多数组合使用仅支持拉丁字符的字体。切换到「英文」模式可正确查看，列表中也提供了中文专属组合。

可以自定义标题或正文字体吗？

可以。打开「手动指定字体」区域，从字体库中为标题或正文指定任意字体，实时预览和 CSS 立即更新。

收藏记录保存在哪里？

仅保存在浏览器的 localStorage 中，不跨设备同步，不上传到服务器。

我们使用 Cookie 用于广告和分析。