发现和预览精美的 Google Fonts 字体搭配，支持实时示例文本和一键复制 CSS 规则
CSS 工具
关于此工具
CSS 字体搭配工具帮助你从 16 组精选的 Google Fonts 搭配中找到完美的标题和正文字体组合。按类别筛选，实时预览文本效果，调整字体大小，并复制带有 @import 语句的即用 CSS 代码。
主要功能
- 16 组精选的 Google Fonts 标题和正文字体搭配
- 类别筛选：全部、sans-serif、serif、monospace、display
- 使用自定义标题和正文示例文本实时预览
- 可调节标题和正文字体大小
- 生成带 @import 语句的 CSS 代码
- 一键复制字体搭配 CSS 代码
使用场景
- 为新网站设计和落地页选择排版方案
- 为博客和编辑布局找到互补字体
- 在确定设计系统之前原型化字体组合
- 为设计系统生成一致的排版 CSS
- 快速浏览 serif、sans-serif 和 display 字体搭配
fonts
typography
css
google-fonts
常见问题
什么是 CSS 字体搭配？
CSS 字体搭配是一款在线 CSS 工具，帮助你发现和预览精选的 Google Fonts 字体搭配，支持实时示例文本和一键 CSS 代码生成。它完全在浏览器中运行，不会向任何服务器发送数据。
有多少组字体搭配可用？
工具包含 16 组精选的 Google Fonts 字体搭配，涵盖 sans-serif、serif、monospace 和 display 等类别。你可以按类别筛选找到最合适的搭配。
可以在预览中调整字体大小吗？
可以，你可以使用内置控件调整标题和正文字体大小。这让你在确定搭配前就能看到不同尺寸下的实际效果。
CSS 字体搭配免费使用吗？
是的，CSS 字体搭配完全免费使用。没有任何隐藏费用、订阅或限制。所有功能对所有人开放。
可以在手机上使用 CSS 字体搭配吗？
是的，CSS 字体搭配完全响应式设计，支持所有设备，包括智能手机、平板电脑和桌面电脑。