Elysia Tools
导航
Design
用真实文案预览标题与正文字体配对、字号、字重、行高、字符集和 CSS 字体栈。
详情
卡片只把输入的字体名作为 CSS 字体栈，不下载字体文件，因此结果离线可复现；最终外观取决于宿主页面已安装或加载的字体。建议使用带引号的字体名并提供 serif、sans-serif 或 system-ui 等通用回退。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
工具使用指南
字体配对预览卡可用真实文案预览标题与正文字体的组合，并调整 CSS 字体栈、字号、字重、行高和字符集，帮助你在页面设计前快速检查排版效果。
背景
品牌官网需要突出标题的编辑感，同时保持正文内容易读。
问题
需要比较高对比度衬线标题与中性无衬线正文在真实文案中的层级效果。
如何使用
输入 `Fraunces, Georgia, serif` 作为标题字体栈，输入 `Inter, system-ui, sans-serif` 作为正文字体栈，并填写英文示例文案。
字符集选择拉丁；标题 48px、700 字重、1.1 行高；正文 18px、400 字重、1.6 行高。结果
生成一张 HTML 预览卡，可直观看到标题与正文的字体组合、尺寸和行距效果。
背景
产品团队准备设计俄语界面，需要确认标题和正文在西里尔文案中的显示效果。
问题
仅查看拉丁字母样式无法判断字体是否适合西里尔字符集。
如何使用
使用 `PT Serif, serif` 作为标题字体栈，使用 `Inter, Arial, sans-serif` 作为正文字体栈，输入俄语示例文案并选择西里尔字符集。
标题 42px、700 字重、1.15 行高；正文 17px、400 字重、1.55 行高。结果
可在实际西里尔文案中检查字体回退、字号、字重和行高的整体表现。
不会。工具只使用输入的字体名称生成 CSS 字体栈。
最终效果取决于宿主页面已安装或加载的字体。
需要，标题字体栈和正文字体栈都是必填项。
可以调整标题和正文字号、字重及行高，还能选择字符集。
当指定字体不可用时，serif、sans-serif 或 system-ui 等回退字体可提供替代显示。