Elysia Tools
导航
Design
并排预览 标题 + 正文 的 Google 字体配对，调节字重与行高，复制即可粘贴的 CSS @import + 变量代码。精选 22 款字体及 7 组经典搭配预设。
详情
并排预览 标题 + 正文 的 Google 字体配对，调节字重和行高，复制即可粘贴的 CSS 代码。
使用方法
@import，以及 CSS 变量（--font-heading、--font-body）和 h1, h2, h3、body, p 的规则。精选搭配——侧栏推荐 7 组已验证的组合（社论、SaaS、新闻、科技、手工、海报、开发者工具），让你从已知良好的基线开始。
注册表覆盖 Inter、Roboto、Open Sans、Lato、Montserrat、Poppins、Work Sans、DM Sans、Nunito、Space Grotesk、Playfair Display、Merriweather、Lora、Source Serif Pro、Crimson Text、EB Garamond、Libre Baskerville、Oswald、Bebas Neue、Caveat、JetBrains Mono、Fira Code。预览直接从 Google Fonts 加载所选字体，所见即所得。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
网页字体配对实验室是一款专为网页设计师和前端开发者打造的在线排版工具。它支持并排预览标题与正文的 Google 字体组合，允许自由调节字重、字号与行高，并能一键生成包含 CSS @import 导入语句和 CSS 变量的样式代码，帮助您快速构建优雅的网页视觉层级。
背景
正在设计一款在线文学杂志，需要一种古典且优雅的排版风格，既要有视觉张力的标题，又要有长时间阅读不疲劳的正文。
问题
难以确定 Playfair Display 标题与 Inter 正文在不同字重和行高下的视觉对比度。
如何使用
在标题字体中选择 Playfair Display 并设字重为 700，正文字体选择 Inter 并设字重为 400，将正文大小设为 16px，行高设为 1.6，并在预览区输入杂志的真实段落。
{"headingFont": "Playfair Display", "headingWeight": 700, "bodyFont": "Inter", "bodyWeight": 400, "bodySize": 16, "lineHeight": 1.6}结果
实时预览确认了高对比度的优雅排版效果，一键复制生成的 CSS 代码直接应用到项目的全局样式表中。
背景
负责公司 SaaS 产品的官网重构，设计师要求使用 Montserrat 搭配 Merriweather，但需要严格控制字体加载体积，避免加载无用的字重。
问题
需要获取只包含 Montserrat 700 和 Merriweather 400 的最小化 Google Fonts 导入代码。
如何使用
选择标题字体 Montserrat (700) 和正文字体 Merriweather (400)，调整行高为 1.7，然后直接复制右侧生成的 CSS 代码。
{"headingFont": "Montserrat", "headingWeight": 700, "bodyFont": "Merriweather", "bodyWeight": 400, "bodySize": 16, "lineHeight": 1.7}支持 Inter、Roboto、Playfair Display、Merriweather 等 22 款精选 Google 字体，涵盖无衬线、衬线、展示、手写及等宽类型。
包含一条仅加载所选字重的 Google Fonts @import 语句、字体族 CSS 变量，以及 h1-h3 和 body, p 的基础样式规则。
工具会自动将字重吸附到该字体在 Google Fonts 中实际可用的最接近字重，以防加载不存在的字体文件。
提供了社论、SaaS、新闻、科技等 7 组经过视觉验证的经典字体搭配，方便您快速开始。
是的，预览区域直接从 Google Fonts 实时加载您选择的字体与字重，确保所见即所得。
结果
获得了精准限制字重的 @import 链接与 CSS 变量，在保证排版还原度的同时优化了网页加载性能。