字体基础：字体的分类、字族、字重、字宽、字形与常见格式
字体是视觉传达的底层语言。在排版工作中，选择一款合适的字体，不仅关乎美观，更直接影响信息的可读性、用户的阅读节奏以及品牌气质的传递。本章将系统梳理字体的分类体系、核心属性（字族、字重、字宽、字形）以及常见字体格式（TTF、OTF、WOFF 等），帮助你建立一套判断字体适用性的专业框架。无论你是平面设计师、前端开发者还是内容运营者，掌握这些基础概念，都是实现高质量排版的第一步。
一、字体的分类体系
字体分类是排版工作的第一道分水岭。不同分类的字体，其笔画特征、适用场景和情感属性截然不同。理解分类，能帮助你在面对一个设计任务时，快速缩小字体选择范围。
1. 衬线字体（Serif）
衬线字体在笔画末端带有装饰性的“衬线”（即笔画起笔、收笔处的额外装饰部分），且笔画粗细通常有明显对比。这种设计源于古罗马时期的石刻文字，具有强烈的古典、正式、权威感。
- 典型代表：宋体（中文）、Times New Roman、Georgia、Playfair Display。
- 适用场景：书籍正文、学术、正式公文、高端品牌形象。在印刷品中，衬线能引导视线水平流动，提升长文阅读的舒适度。
- 屏幕注意：在低分辨率屏幕上，细小衬线可能显示模糊，需谨慎使用小字号衬线字体。
2. 无衬线字体（Sans-serif）
无衬线字体没有装饰性衬线，笔画粗细均匀，结构简洁干净。它诞生于工业革命时期，体现了现代、理性、中性的气质。
- 典型代表：黑体（中文）、Arial、Helvetica、微软雅黑、Roboto。
- 适用场景：网页正文、UI界面、演示文稿、标题、导视系统。在屏幕显示中，无衬线字体具有更高的可读性和清晰度。
- 情感属性：传递出直接、高效、亲和的感受，是数字产品的主流选择。
3. 等宽字体（Monospace）
等宽字体中，每个字符（包括字母、数字、标点）占据的宽度完全相同。这一特性源于打字机和早期计算机终端。
- 典型代表：Consolas、Courier New、Source Code Pro、中文的仿宋（部分场景）。
- 适用场景：代码编辑器、命令行界面、表格数据对齐、技术文档。等宽特性让代码缩进和列对齐变得精准无误。
- 进阶用法：在排版中，使用等宽字体展示URL、文件名、变量名，能形成清晰的视觉区分。
4. 手写体与装饰字体（Script & Decorative）
手写体模拟真实笔迹，具有流畅的连接笔画和个性化特征；装饰字体则包含各种风格化、图形化的设计，如哥特体、涂鸦体等。
- 典型代表：Brush Script、Pacifico、以及各类花体中文。
- 适用场景：海报标题、节日贺卡、品牌Logo、社交媒体配图。这类字体个性极强，但可读性较差。
- 使用原则：仅用于短文本、大字号场景，严禁用于正文段落。一个版面中，装饰字体不应超过一种。
| 分类 | 核心特征 | 中文代表 | 西文代表 | 首选场景 |
|---|---|---|---|---|
| 衬线 | 笔画末端有装饰线，粗细对比明显 | 宋体、仿宋 | Times New Roman | 书籍、公文、学术 |
| 无衬线 | 无装饰线，笔画均匀 | 黑体、雅黑 | Arial、Helvetica | 屏幕阅读、UI、标题 |
| 等宽 | 每个字符宽度相同 | 仿宋（特定场景） | Consolas、Courier | 代码、表格、文档 |
| 手写/装饰 | 模拟笔迹或高度风格化 | 各类花体字 | Brush Script | 海报、Logo、短标题 |
二、字族、字重、字宽与字形
这四个概念构成了字体的“多维坐标系”。理解它们，你才能精确地描述“我要一款什么样的字体”，而不是笼统地说“换个字体看看”。
1. 字族（Font Family）
字族是一组具有共同设计风格、但不同字重和字宽的字体集合。例如，“微软雅黑”是一个字族，它包含 Light、Regular、Semibold、Bold 等多个成员。在 CSS 中，font-family 属性用于定义字族列表，浏览器会按顺序选择可用字体。
/* CSS 示例：定义字族回退顺序 */
body {
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}这条规则的含义是：优先使用苹方，若系统不支持则回退到微软雅黑，再不行则用西文无衬线字体，最后用系统默认无衬线字体兜底。
2. 字重（Font Weight）
字重指字体的笔画粗细程度。常见的字重从细到粗依次为：Thin（100）、Light（300）、Regular（400）、Medium（500）、Semibold（600）、Bold（700）、Heavy（800）、Black（900）。
- 判断方法：在字体选择器中，查看字重名称或数值。并非所有字体都包含全部9个字重，许多字体只有 Regular 和 Bold 两种。
- 使用策略：正文通常使用 Regular（400）或 Light（300）；标题使用 Semibold（600）或 Bold（700）；强调信息可用 Medium（500）。避免在正文中大量使用 Bold，否则会破坏版面灰度。
3. 字宽（Font Width）
字宽描述字符的横向延展程度。标准宽度为 Normal，较窄的称为 Condensed（压缩），较宽的称为 Expanded（扩展）。
- 应用场景：在有限空间内（如表格列头、导航菜单）使用 Condensed 字体可容纳更多字符；在标题或海报中使用 Expanded 字体可增强视觉张力。
- 注意事项：压缩字宽会降低可读性，不宜用于长文本。中文压缩字体较少见，西文中较为普遍。
4. 字形（Font Style）
字形通常指字体的倾斜状态（Italic / Oblique）以及特殊变体（如 Small Caps 小型大写字母）。
- Italic（斜体）：是一种独立的字体设计，并非简单地将正体倾斜。中文中斜体使用较少，西文中用于强调书名、外文词汇。
- Oblique（倾斜体）：是正体字形的机械倾斜，多用于无衬线字体。
- Small Caps（小型大写字母）：将大写字母缩小为小写字母高度，常用于英文缩写、章节标题，显得精致专业。
| 属性 | 维度 | 常见值 | 排版影响 |
|---|---|---|---|
| 字族 | 家族集合 | 宋体、雅黑、Roboto | 决定整体风格基调 |
| 字重 | 笔画粗细 | Light / Regular / Bold | 影响视觉层级与强调效果 |
| 字宽 | 横向比例 | Condensed / Normal / Expanded | 影响空间利用与版面密度 |
| 字形 | 倾斜/变体 | Italic / Small Caps | 用于特定语义强调 |
三、常见字体格式：TTF、OTF、WOFF 与使用场景
字体格式决定了字体文件如何被操作系统和浏览器解析。不同格式在兼容性、压缩率和功能支持上各有差异。
1. TTF（TrueType Font）
由 Apple 和 Microsoft 联合开发，是最经典的字体格式。它使用二次贝塞尔曲线描述字形轮廓，兼容性极广，几乎所有操作系统和浏览器都支持。
- 优点：兼容性最好，适用于本地安装和文档编辑。
- 缺点：文件体积较大，未针对网络传输优化。
2. OTF（OpenType Font）
OTF 建立在 TTF 基础上，由 Microsoft 和 Adobe 联合开发。它支持更高级的排版特性，如连字（Ligatures）、旧式数字（Oldstyle Figures）、小型大写字母等。
- 优点：排版能力强大，支持跨平台（Windows/macOS），可包含 TrueType 或 PostScript 轮廓。
- 适用场景：专业排版软件（InDesign、Illustrator）中的首选格式。
3. WOFF / WOFF2（Web Open Font Format）
WOFF 是专为网页设计的字体格式，本质上是 TTF/OTF 的压缩版本，并添加了元数据。WOFF2 采用 Brotli 压缩算法，体积比 WOFF 再小约 30%。
- 优点：加载速度快，节省带宽，是当前 Web 字体的事实标准。
- 使用方式：通过 CSS 的
@font-face规则引入。
/* @font-face 引入 WOFF2 示例 */
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
font-weight: 400;
font-display: swap;
}4. 其他格式：EOT 与 SVG
EOT（Embedded OpenType）是 IE 时代的专属格式，现已基本淘汰。SVG 字体曾用于早期 Safari，因不支持矢量渲染细节，也已废弃。当前只需关注 TTF、OTF、WOFF、WOFF2 四种即可。
| 格式 | 压缩率 | 排版特性支持 | 推荐场景 |
|---|---|---|---|
| TTF | 无压缩 | 基础 | 本地安装、文档 |
| OTF | 无压缩 | 高级（连字、变体） | 专业印刷设计 |
| WOFF | 中等（约 40%） | 基础 | 网页加载 |
| WOFF2 | 高（约 70%） | 基础 | 现代网页（首选） |
font-display: swap 以避免文本不可见（FOIT）问题。同时，注意字体文件的授权许可，商业网站需购买商用授权，避免版权纠纷。
四、实战场景：为一份年度报告选择字体
假设你正在为一家金融科技公司的年度报告设计排版方案。报告包含大量数据图表、文字分析和品牌展示需求。以下是完整的决策过程：
1. 背景与约束
- 输出媒介：PDF 电子版 + 印刷版（各 5000 份）。
- 品牌调性：专业、稳健、现代，但需保留一定亲和力。
- 内容结构：约 40 页，包含 15 个数据图表、10 个章节标题、大量正文段落。
- 技术限制：PDF 需嵌入字体，印刷需使用 OTF 格式以保证输出质量。
2. 字体选择方案
| 用途 | 字族 | 字重 | 格式 | 选择理由 |
|---|---|---|---|---|
| 中文正文 | 思源宋体（衬线） | Regular（400） | OTF | 衬线提升正式感，适合长文阅读 |
| 中文标题 | 思源黑体（无衬线） | Bold（700） | OTF | 无衬线标题清晰有力，与正文形成对比 |
| 英文/数字 | Source Serif Pro | Regular / Semibold | OTF | 与思源宋体风格协调，数字显示清晰 |
| 代码/数据表 | Source Code Pro | Regular | OTF | 等宽字体保证表格数字对齐 |
3. 实施步骤与结果
- 步骤一：下载思源宋体、思源黑体、Source Serif Pro 和 Source Code Pro 的 OTF 文件，并确认授权为 SIL Open Font License（免费商用）。
- 步骤二：在 InDesign 中设置段落样式：正文使用思源宋体 Regular，行距 1.6 倍；标题使用思源黑体 Bold，字号 24pt；数据表格使用 Source Code Pro，字号 9pt。
- 步骤三：导出 PDF 时勾选“嵌入所有字体”，确保在不同设备上显示一致。
- 结果对比：初稿曾使用单一黑体排版，版面显得生硬且缺乏层级；改用“宋体正文 + 黑体标题”后，阅读舒适度显著提升，数据表格的等宽字体让数字对比一目了然。
- 代价与复盘：思源宋体文件体积较大（约 20MB），导致 PDF 文件增大，但通过压缩图片和优化嵌入选项解决了问题。复盘经验：字体选择应优先考虑内容属性，而非单纯追求“好看”。
五、常见误区与避坑指南
- 误区一：过度使用装饰字体。一个版面中出现 3 种以上手写体，会显得杂乱无章。正确做法是：装饰字体只用于主标题，且全篇不超过一种。
- 误区二：忽略字重层级。所有文字都用 Regular，导致版面缺乏重点。应至少区分正文、强调、标题三种字重。
- 误区三：在网页中直接使用 TTF 格式。TTF 未压缩，会拖慢页面加载速度。应转换为 WOFF2 格式。
- 误区四：混淆字形与字重。斜体（Italic）是字形，不是字重。在中文排版中，不要用倾斜代替加粗来强调。
- 误区五：忽视字体授权。免费字体（如思源系列）可放心商用，但部分免费字体仅限个人使用，商用前务必核查授权协议。