字体配对工具

什么是字体配对工具？

如何使用字体配对工具

1. 1

   选择风格：在页面顶部的风格分类列表里，点击选中符合你项目定位的字体配对风格分类，筛选出对应方向的现成搭配方案。

2. 2

   预览效果：点击任意一组字体配对卡片后，即可在下方预览区域查看标题和正文搭配后的实际显示效果，直观感受整体观感。

3. 3

   调整参数：点击预览区域上方的『小』『中』『大』按钮切换字号大小，观察不同字号下字体搭配的呈现效果，适配不同场景。

4. 4

   复制代码：确认字体搭配后，点击预览区下方的『复制CSS代码』按钮，即可一键获取这组搭配的完整CSS代码，供项目使用。

什么场景会用到？

计算示例

注意事项

• 本工具提供的是通用推荐配对方案，具体效果仍需结合你的设计场景、字号、行间距调整。
• 所有配对方案使用的都是系统或免费可商用字体，若你使用付费商用字体，需自行确认授权范围。
• 复制生成的CSS已经包含回退字体 fallback，适配未安装对应字体的设备，不需要额外修改。
• 中文和英文配对默认区分语言，不要将中文字体方案直接套用在全英文设计上，易出现西文显示效果不佳的问题。

常见问题

参考资料

• Google Fonts 官方字体配对推荐实践
• 中文网页字体设计行业通用实践

本页所有配对方案参考通用设计原则整理，所有生成的CSS代码均经过工具测试复算，由工具集编辑组维护，适配常见网页和设计场景使用。