字体搭配与 Google Fonts 目录
浏览精选的热门 Google Fonts 目录，支持实时预览、按类别筛选和按名称搜索，然后复制可直接粘贴的 CSS 并探索推荐的字体搭配——全部在浏览器中完成。
没有字体匹配您的搜索。请尝试其他名称或类别。
一切都在浏览器中运行——字体仅从 Google Fonts 加载以供实时预览，不会上传任何内容，无需注册，完全免费。
用装饰字体排版的标题
这是一段用搭配的正文字体排版的正文内容。好的字体搭配能在个性与可读性之间取得平衡：富有特色的标题字体吸引视线，而干净、舒适的正文字体让长篇内容易于阅读。点击 “CSS” 即可复制 @import 引入语句以及标题与正文的 font-family 规则。
标题:
正文:
关于 字体搭配与 Google Fonts 目录
这个字体目录将 80 款热门 Google Fonts 收录在一个可搜索的页面中,每款字体都以实时样张形式呈现,包含一行全字母例句、一行字母和数字样本,以及一个分类标签。它涵盖了五大字体家族——无衬线、衬线、展示体、手写体和等宽体——让你可以对比真实的字形效果,而不是靠名字猜测。
每张字体卡片都包含精选的搭配建议:适合搭配使用的伙伴字体,用于标题和正文。点击一个搭配标签会打开预览,用其中一款字体设置标题,另一款设置段落,让你在决定之前就能看到实际搭配效果。
当某款字体或搭配令你满意时,一键即可复制可直接粘贴使用的 CSS——一行 Google Fonts 样式表的 @import 语句,加上带有合理回退方案的匹配 font-family 声明。字体仅在实时预览时从 Google Fonts 加载;你输入的任何内容都不会被上传。
如何使用 字体搭配与 Google Fonts 目录
- 浏览字体卡片,每张卡片都显示名称、分类标签,以及用实际字体呈现的实时样例文字。
- 使用搜索框按名称查找字体,或点击分类标签(无衬线、衬线、展示体、手写体、等宽体)筛选网格。
- 拖动尺寸滑块(16–72 px)以目标标题或正文大小预览样例行。
- 点击"搭配"标签或"预览搭配"按钮,查看以建议组合设置的标题和正文段落。
- 点击卡片或搭配预览中的"CSS"按钮,将 @import 语句和 font-family 声明复制到剪贴板。
常见问题
它精选收录了 80 款广泛使用的 Google Fonts,分布在五个类别中:无衬线、衬线、展示体、手写体和等宽体。每个分类标签都会显示实时数量,方便你查看当前筛选条件下匹配了多少款字体。
每款字体都列出一到两款经过精心挑选、与之形成良好对比的伙伴字体——通常是用于标题的展示体或衬线字体,搭配一款易读的正文字体。搭配预览会展示每种组合在标题和正文角色下的确切效果。
对于单款字体,你会得到一行指向 Google Fonts css2 端点的 @import url() 语句(常规和加粗字重),外加一个带有正确通用回退方案的 font-family 声明。对于搭配组合,你会得到两条 import 语句,以及标题和正文分别的独立声明。
是的,实时预览会从 Google Fonts CDN 加载字体——这是该页面唯一的外部请求。你的搜索记录、筛选选择和已复制的 CSS 都留在你的浏览器中;不会被上传或存储。
是的,浏览、预览搭配和复制 CSS 全部免费,无需账户。列出的字体均为 Google Fonts,在其开放许可下,个人和商业项目均可免费使用。
你可以用尺寸滑块将样张大小调整到 16 px 到 72 px 之间的任意值,所有卡片会同时更新。这让你可以方便地按计划用于标题或正文的确切大小来比较候选字体。
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。