CodeKitHub工具介绍
字体搭配指的是在同一页面上组合使用两种（偶尔三种）字体——通常一种用于标题，一种用于正文——从而在保持视觉层次的同时，避免风格不搭或过于单一。
下方每组搭配都会实时渲染示例：上方是标题字体，下方是正文字体，使用的是真实的谷歌字体文件，所见即所得。
每组搭配都附带一个可直接使用的谷歌字体 `<link>` 嵌入标签，以及对应的CSS代码片段，包含标题和正文的 `font-family` 声明——两个都复制即可完成。
为什么使用它？
- 28组精心挑选的搭配，不是自动生成的列表——每一组都是因为两款字体真正互相衬托而被选中的。
- 实时预览：每组搭配都用从谷歌字体加载的真实字体渲染，而不是静态图片或字体名称的猜测效果。
- 按风格筛选——现代、优雅、大胆、简约、经典——快速缩小到符合项目气质的选择。
- 一键复制 `<link>` 嵌入标签和CSS `font-family` 规则。
- 免费，浏览器内运行，无需注册或登录。
使用方法
- 可选择点击某个风格筛选按钮（现代、优雅、大胆、简约、经典）缩小范围，或保持「全部」浏览所有搭配。
- 浏览实时预览卡片——上方一行显示标题字体，下方一行显示正文字体。
- 找到心仪的搭配后，点击展开嵌入代码部分。
- 将 `<link>` 标签复制到你的HTML `<head>` 中，将CSS代码片段复制到你的样式表中，即可将字体应用到标题和正文。
示例
输入
优雅风格博客输出
Playfair Display（标题）+ Source Sans Pro（正文）按「优雅」筛选会得到对比强烈的衬线体标题，搭配简洁易读的无衬线正文——这是编辑类和博客类页面常见的组合。
好字体搭配的原则
- 对比优于相似：两款外观几乎相同的字体（比如两种相似的几何无衬线体）往往会显得像是失误，而不是刻意的选择。将衬线体与无衬线体搭配，或将厚重的展示字体与轻盈的正文字体搭配，让差异显得是有意为之。
- 匹配x字高和比例：小写字母视觉高度相近的字体，即使风格不同，放在同一页面也会显得协调——x字高不匹配是搭配「看着不对劲」最常见的原因之一。
- 限制在两种字体家族以内（偶尔三种）：一种用于标题，一种用于正文，最多再加一种用于按钮或标签等强调元素。超过这个数量，页面就容易显得杂乱无章。
- 考虑调性，而不只是形状：圆润活泼的无衬线体搭配正式的衬线体，即使字形上能凑合，传递的信号也是矛盾的——选择在结构和气质上都一致的字体。
- 以实际尺寸测试：一组在大预览图中看起来很棒的搭配，缩小到正文字号时可能对比不足，或者展示字体在小尺寸下变得难以辨认——一定要检查两个极端情况。
根据使用场景选择搭配
落地页和营销类网站通常适合「大胆」或「现代」风格——一款强烈、对比鲜明的标题字体能在首屏抓住注意力，搭配简洁中性的正文字体，便于长文案的快速浏览。
博客和编辑类内容用「优雅」或「经典」风格的搭配效果最好——精致的衬线标题传递出经过打磨、编辑严谨的语气，而舒适的衬线或无衬线正文则能让长文章在长时间阅读中保持易读性。
电商和产品类网站更适合「简约」风格的搭配——克制、中性的字体能让焦点回到产品图片和价格上，而不是排版本身，这在一页展示几十个产品卡片时尤为重要。
作品集和创意类网站有最大的发挥空间——更有个性的「大胆」或「优雅」搭配往往效果不错，因为访客本身就带着评判视觉品味的心态前来浏览。
关于性能与授权的说明
嵌入的 `<link>` 标签从谷歌CDN加载字体，速度快，而且很可能已被访客访问过的其他网站缓存过——但它确实会增加一次外部请求。对于每一毫秒都很重要的网站，下载字体文件并自行托管（手动设置 `font-display: swap`）可以消除这一外部依赖，代价是需要额外的配置工作。
谷歌字体库中的所有字体都是开源的，可免费商用，且无需署名，不过在方便的情况下，向字体设计师致谢也是一种不错的礼貌。
常见问题
什么样的两款字体算是「搭配得好」？
好的搭配需要在对比与和谐之间取得平衡。对比——比如衬线体搭配无衬线体，或粗体的展示字体搭配朴素的正文字体——能创造出清晰的视觉层次，让标题和正文有明显区分。和谐——比如相近的x字高、相似的笔画粗细，以及一致的正式或活泼调性——则能避免两者显得冲突。这里的每组搭配都兼顾了这两点。
标题和正文一定要用不同的字体吗？
不一定。使用同一字体家族（比如本工具中的「Rubik + Rubik」搭配）也完全可行，只要该字体有足够的字重变化来区分标题和正文即可。这是一种简约但有效的选择，并非错误。
如何把某组搭配实际应用到我的网站上？
将 `<link>` 嵌入标签复制到页面的 `<head>` 中，用于从谷歌CDN加载字体，然后将CSS代码片段复制到你的样式表中——它会为标题（h1、h2、h3）和正文（body、p）设置 `font-family`。如果你的页面结构不同，可自行调整CSS选择器。
加载谷歌字体会拖慢我的网站速度吗？
每多加载一个字体文件都会增加一次网络请求，也带来一定的渲染阻塞风险。建议只用一个标题字重和一到两个正文字重，使用 `display=swap`（嵌入代码中已包含）让文字在网络字体加载完成前先以备用字体显示，对于追求极致加载速度的生产环境网站，也可以考虑将字体文件自行托管。
这些字体可以商用吗？
可以。谷歌字体库中的所有字体，包括这里展示的每一组搭配，都采用SIL开源字体许可证或Apache许可证——两者都允许免费商用、修改和再分发，无需支付版权费。