# 字体配对预览卡

用真实文案预览标题与正文字体配对、字号、字重、行高、字符集和 CSS 字体栈。

> 标准页面: https://elysiatools.com/zh/tools/font-pairing-preview-card

- **分类:** Design

- **关键词:** 字体配对, 排版, 字体预览, CSS 字体栈

## 概述

卡片只把输入的字体名作为 CSS 字体栈，不下载字体文件，因此结果离线可复现；最终外观取决于宿主页面已安装或加载的字体。建议使用带引号的字体名并提供 serif、sans-serif 或 system-ui 等通用回退。

## 输入项

- **标题字体栈** (text): Fraunces, Georgia, serif
- **正文字体栈** (text): Inter, system-ui, sans-serif
- **示例文案** (textarea): A thoughtful interface starts with readable type.
- **字符集** (select)
- **标题字号 (px)** (number)
- **正文字号 (px)** (number)
- **标题字重** (number)
- **正文字重** (number)
- **标题行高** (number)
- **正文行高** (number)

## 适用场景

- 为网站或产品界面选择标题与正文字体组合。
- 比较不同字号、字重和行高对可读性的影响。
- 检查拉丁、西里尔、希腊、中文、阿拉伯或天城文字符集的显示效果。

## 工作原理

- 输入标题字体栈和正文字体栈，例如带引号的字体名并添加 serif、sans-serif 或 system-ui 回退。
- 填写用于预览的真实文案，并选择对应字符集。
- 设置标题和正文的字号、字重与行高。
- 工具生成 HTML 预览卡；字体名称仅作为 CSS 字体栈使用，不会下载字体文件。

## 使用案例

- 设计师在制作品牌官网时，比较编辑风格衬线标题与中性无衬线正文的视觉层级。
- 产品团队在多语言界面上线前，使用实际文案检查不同字符集的字体覆盖情况。
- 前端开发者在编写 CSS 前，先确认字号、字重和行高组合是否符合页面排版需求。

## 常见问题

### 这个工具会下载或嵌入字体文件吗？

不会。工具只使用输入的字体名称生成 CSS 字体栈。

### 为什么预览中的字体外观可能不同？

最终效果取决于宿主页面已安装或加载的字体。

### 标题和正文需要分别输入字体栈吗？

需要，标题字体栈和正文字体栈都是必填项。

### 可以调整哪些排版参数？

可以调整标题和正文字号、字重及行高，还能选择字符集。

### 为什么建议添加通用回退字体？

当指定字体不可用时，serif、sans-serif 或 system-ui 等回退字体可提供替代显示。

## 相关工具

- [BFV、CKKS、LWE 全同态加密密文噪声预算、重线性化与自举讲解器](https://elysiatools.com/zh/tools/bfv-ckks-lwe-fhe-ciphertext-noise-budget-relin-and-bootstrapping-explainer): 在 Z_q\[x\]/(xⁿ+1) 上运行真实的迷你 BFV/CKKS 流水线：精确的不变噪声预算（比特）、带重线性化的密文乘法、模数切换、SIMD 槽位打包与自举刷新。
- [稿件风格一致性审计器](https://elysiatools.com/zh/tools/manuscript-style-consistency-auditor): 同时检查数字、日期、单位、引号、破折号、标题层级、人物名和专名一致性,生成 style sheet
- [透明度调节器](https://elysiatools.com/zh/tools/color-opacity-adjuster): 调节颜色透明度/Alpha透明度，支持实时预览和批量处理
- [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。
- [Figma iOS Android pt dp sp 响应式设计规范卡](https://elysiatools.com/zh/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): 把 Figma 像素值换算成平台正确单位并生成开发者规范卡：iOS pt（@1x/@2x/@3x 及各倍率渲染 px）、Android dp/sp（mdpi…xxxhdpi 全密度桶渲染表、字体缩放）、Web rem/vw 与 clamp() 流式排版片段；按 iOS 44pt / Android 48dp / WCAG 44px 与 24px 审计最小触控目标，并标注 Material 窗口类与 Tailwind 断点。
- [字体文件检视器（TTF / OTF / WOFF / WOFF2）](https://elysiatools.com/zh/tools/font-file-inspector): 上传 TTF、OTF、WOFF 或 WOFF2 字体文件（WOFF2 自动解压），检视完整元数据：家族/子族/设计师/版权/版本、字形数、unitsPerEm、字重与宽度级别、斜体角度、风格标志、包围盒；按 Unicode 区块统计覆盖热力图；渲染字形 SVG 预览（可自定义文本，图标字体自动采样）；列出 GSUB 连字（liga）与 OpenType 特性；可变字体显示 fvar 轴与命名实例。
- [PDF排版实验室](https://elysiatools.com/zh/tools/pdf-typography-playground): 实验排版设置：行距、间距、对齐和缩进
- [去除重复行](https://elysiatools.com/zh/tools/remove-duplicate-lines): 对列表或文本块中的行去重。保留每行的首次或最后一次出现，支持区分大小写、比较前修剪空白和忽略空行。

## 示例

- [银行卡号示例](https://elysiatools.com/zh/samples/credit-card): 用于测试的各卡组织银行卡号样本（Visa、MasterCard、银联等）
- [可变字体示例](https://elysiatools.com/zh/samples/variable-font-samples): 包含fvar轴的可变字体文件，用于轴/实例检查器和CSS构建器
- [无版权MP3音频样本](https://elysiatools.com/zh/samples/mp3-samples): 免费使用和测试的无版权音频样本集合，包括自然声音、冥想音乐和环境音频，适用于测试和开发目的
- [SVG示例](https://elysiatools.com/zh/samples/svg-samples): 可缩放矢量图形（SVG）示例，展示各种SVG功能和技术