字体搭配工具
为你的网页找到完美的字体组合。选择标题和正文字体，实时预览效果，一键复制可用的 CSS 代码。
字体控制
自定义标题和正文字体
48px
18px
1.6
预览
Playfair Display + Lato
探索字体搭配的艺术，让设计更出色
好的排版是无形的，伟大的排版让人难以忘怀。正确的字体搭配能创造视觉层次，提升可读性，并强化品牌形象。无论你在构建着陆页、博客还是电商网站，你选择的字体都将为整个用户体验定下基调。
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )
CSS
/* Heading */
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
h1 {
font-size: 48px;
}
/* Body */
body, p {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.6;
}
/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400&display=swap');精选字体搭配
经过专业挑选的完美字体组合
字体搭配技巧
创造对比
搭配不同个性的字体——装饰性标题搭配简洁正文，自然形成视觉层次。
限制字体数量
最多使用 2-3 种字体家族，太多字体会让设计显得混乱和不专业。
优先考虑可读性
正文必须在较小字号下清晰易读，选择针对屏幕阅读优化的字体。
多设备测试
桌面上好看的效果在手机上可能不佳，始终在不同屏幕尺寸下预览。
匹配品牌调性
衬线字体传达传统和信任感；无衬线字体更现代和亲切。选择能反映品牌调性的字体。
善用字重
通过不同字重创造强调和层次，而不是添加更多字体家族。