# 网页字体配对实验室

并排预览 标题 + 正文 的 Google 字体配对，调节字重与行高，复制即可粘贴的 CSS @import + 变量代码。精选 22 款字体及 7 组经典搭配预设。

> 标准页面: https://elysiatools.com/zh/tools/webfont-pairing-lab

- **分类:** Design

- **关键词:** 字体配对, google 字体, 字体排印, web 字体, 标题正文字体, css import, @import, 字体组合, 字重, webfont, 设计系统

## 概述

并排预览 **标题 + 正文** 的 Google 字体配对，调节字重和行高，复制即可粘贴的 CSS 代码。

**使用方法**
1. 从精选 22 款字体（衬线、无衬线、展示、手写、等宽）中选 **标题字体** 与 **正文字体**。
2. 设置 **标题字重** 与 **正文字重**；每款字体会吸附到最近的可用字重。
3. 调节 **正文大小 (px)** 与 **行高**；预览实时更新。
4. 可选自定义 **标题示例** 与 **正文示例** 文本。
5. 复制生成的 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 加载所选字体，所见即所得。

## 输入项

- **标题字体** (select): The display / heading typeface.
- **标题字重** (number): Snaps to the nearest available weight for the chosen font.
- **正文字体** (select): The body / paragraph typeface.
- **正文字重** (number): Snaps to the nearest available weight for the chosen font.
- **正文大小 (px)** (number): Body paragraph font-size in pixels.
- **正文行高** (number): Unitless line-height for body text. 1.4–1.7 is the readable range.
- **标题示例文本** (text): Optional custom heading text. Defaults to a neutral sample.
- **正文示例文本** (textarea): Optional custom body paragraph(s). Defaults to a neutral sample.

## 适用场景

- 在为新网页项目或设计系统挑选和搭配标题与正文字体时。
- 需要微调正文字号、行高与字重，以确保屏幕阅读的易读性与排版美感时。
- 想要快速获取只加载特定字重的 Google Fonts 导入代码及 CSS 变量以优化网页加载速度时。

## 工作原理

- 从精选的 22 款 Google 字体中分别选择标题字体与正文字体，并设置对应的字重。
- 调节正文字号（px）与行高，或在输入框中自定义标题和正文的示例文本以实时预览效果。
- 复制自动生成的 CSS 代码，其中包含精准限制字重的 @import 导入语句以及定义好的 CSS 变量与基础标签样式。

## 使用案例

- SaaS 落地页设计：使用 Montserrat 搭配 Merriweather，为科技感标题与高可读性正文寻找最佳的行高与字重平衡。
- 博客与新闻网站排版：选用 Playfair Display 搭配 Inter，预览大字号衬线体标题与无衬线正文的社论风格排版。
- 开发者工具文档建设：使用 Space Grotesk 搭配 JetBrains Mono，为技术文档或代码展示页面配置极客风格的等宽字体组合。

## 常见问题

### 这个工具支持哪些字体？

支持 Inter、Roboto、Playfair Display、Merriweather 等 22 款精选 Google 字体，涵盖无衬线、衬线、展示、手写及等宽类型。

### 导出的 CSS 代码包含什么？

包含一条仅加载所选字重的 Google Fonts @import 语句、字体族 CSS 变量，以及 h1-h3 和 body, p 的基础样式规则。

### 为什么我设置的字重没有生效？

工具会自动将字重吸附到该字体在 Google Fonts 中实际可用的最接近字重，以防加载不存在的字体文件。

### 侧栏的预设搭配是什么？

提供了社论、SaaS、新闻、科技等 7 组经过视觉验证的经典字体搭配，方便您快速开始。

### 预览字体是实时加载的吗？

是的，预览区域直接从 Google Fonts 实时加载您选择的字体与字重，确保所见即所得。

## 相关工具

- [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 之间架桥，无需逐个手抄。
- [字体文件检视器（TTF / OTF / WOFF / WOFF2）](https://elysiatools.com/zh/tools/font-file-inspector): 上传 TTF、OTF、WOFF 或 WOFF2 字体文件（WOFF2 自动解压），检视完整元数据：家族/子族/设计师/版权/版本、字形数、unitsPerEm、字重与宽度级别、斜体角度、风格标志、包围盒；按 Unicode 区块统计覆盖热力图；渲染字形 SVG 预览（可自定义文本，图标字体自动采样）；列出 GSUB 连字（liga）与 OpenType 特性；可变字体显示 fvar 轴与命名实例。
- [可变字体轴实例与 CSS font-variation-settings 构建器](https://elysiatools.com/zh/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): 上传可变字体（TTF/OTF/WOFF/WOFF2），检视 fvar 轴与命名实例，浏览器内实时预览插值效果，并生成可直接复制的 font-variation-settings CSS、高级属性等价写法与可变 @font-face 声明。
- [CSS 流体排版 Clamp 计算器](https://elysiatools.com/zh/tools/css-fluid-typography-clamp-calc): 输入最小/最大视口与字号边界，输出 clamp() 表达式、可复制 CSS 与实时预览数据
- [C# 正则测试器（.NET）](https://elysiatools.com/zh/tools/csharp-regex-tester): 在线测试 .NET/C# 正则表达式：命名组 ((?…))、IgnoreCase/Multiline/Singleline 选项、匹配高亮、捕获组表格、可直接粘贴的 C# 代码和 IgnorePatternWhitespace 预览。
- [DNS 区域文件记录生成器](https://elysiatools.com/zh/tools/dns-zone-file-record-builder): 表单式生成 SOA / NS / A / AAAA / CNAME / MX / TXT (SPF / DKIM / DMARC) / SRV / CAA / TLSA / NAPTR / DS 记录。输出 RFC 1035 zone-file 文本和人类可读摘要表,支持 TTL 和多记录。
- [增强文本统计仪表盘](https://elysiatools.com/zh/tools/enhanced-text-statistics-dashboard): 统一文本分析仪表盘:词/字符/句子计数、TTR 词汇多样性、词汇密度、音节估计,以及分别的阅读时长(238 wpm)和朗读时长(150 wpm)估计 —— 外加内容词 vs 功能词 Top 词频。
- [图片隐写术：嵌入与检测](https://elysiatools.com/zh/tools/image-steganography-embed-detect): 把文字藏进 PNG 的最低有效位、再原样提取，并运行 Westfeld–Pfitzmann 卡方隐写分析（含滑窗 p 曲线与 LSB 位平面预览）。

## 示例

- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web TypeScript 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-typescript): Web TypeScript 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Go 文件操作示例](https://elysiatools.com/zh/samples/web-file-operations-go): Web Go 文件操作示例，包括文本文件读写、文件复制移动、目录遍历和文件验证