The quick brown fox jumps over the lazy dog
排版是排列文字以使书面语言易读、可读且在显示时具有吸引力的艺术和技术。字体排列涉及选择字体、字号、行长、行距和字距。
探索排版艺术
排版是排列文字以使书面语言易读、可读且在显示时具有吸引力的艺术和技术。字体排列涉及选择字体、字号、行长、行距和字距。
字体配对查找器 - Google Fonts配对工具 在线
通过多种布局的实时预览发现完美的Google Fonts组合。生成即用的CSS代码 — 100%客户端处理，无数据发送到服务器。
常见问题
什么是字体配对查找器？
字体配对查找器是一个在线工具，帮助您发现两种字体的和谐组合——通常一种用于标题，一种用于正文。它让您浏览Google Fonts库中的字体，在真实布局中预览它们，并导出所需的CSS代码。
如何使用这个工具？
1. 从下拉菜单中选择标题字体。2. 选择正文字体。3. 调整排版设置（大小、粗细、行高、字距）。4. 切换预览布局（文章、卡片、个人资料）。5. 尝试精选配对获取灵感。6. 复制生成的CSS代码用于您的项目。
我的数据安全吗？
您的排版选择100%私密，不会发送到任何服务器。该工具完全在浏览器中运行。唯一的外部请求是向Google Fonts CDN加载字体文件。
什么是好的字体配对？
好的字体配对通常遵循这些原则：对比——组合不同类别的字体。共同特征——寻找相似的x-height和比例。层次——标题字体应在视觉上与正文区分开。可读性——正文字体在小尺寸下应高度可读。
衬线体、无衬线体、展示体、手写体和等宽体有什么区别？
衬线体在字母末端有装饰性笔画（如：Merriweather）。无衬线体简洁无装饰（如：Roboto）。展示体是用于大尺寸的装饰字体（如：Lobster）。手写体模仿手写文字（如：Caveat）。等宽体的所有字符宽度相同（如：Fira Code）。
我可以直接在项目中使用生成的CSS吗？
是的。导出面板生成可用于生产的代码，包括HTML <link>标签、CSS @import语句和带有系统字体回退的font-family声明。
代码示例
// Font Pair Finder - Dynamic Google Font Loading
function loadGoogleFont(family, weights = [400, 700]) {
const weightsStr = weights.join(";");
const url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@${weightsStr}&display=swap`;
if (document.querySelector(`link[href="${url}"]`)) return;
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
document.head.appendChild(link);
}
function generatePairingCSS(headingFont, bodyFont, options = {}) {
const { headingSize = 36, bodySize = 16, headingWeight = 700, bodyWeight = 400, lineHeight = 1.5 } = options;
return `h1, h2, h3 {
font-family: '${headingFont}', system-ui, sans-serif;
font-weight: ${headingWeight};
font-size: ${headingSize}px;
}
body, p {
font-family: '${bodyFont}', system-ui, sans-serif;
font-weight: ${bodyWeight};
font-size: ${bodySize}px;
line-height: ${lineHeight};
}`;
}
loadGoogleFont("Montserrat", [400, 700]);
loadGoogleFont("Open Sans", [400, 600]);
console.log(generatePairingCSS("Montserrat", "Open Sans"));