1. 字体基础概念：从分类到排版
做跨平台字体适配，第一步得把基础概念理清楚。我见过不少前端同学，一遇到字体显示问题就抓瞎，说白了就是没搞懂字体到底分几类、每种格式有什么坑。这一节咱们就把地基打牢。
1.1 字体三大分类
字体按字形特征，主要分三类。我习惯把它们记成「有脚、没脚、等宽」。
| 分类 | 特征 | 典型字体 | 适用场景 |
|---|---|---|---|
| 衬线体（Serif） | 笔画末端有装饰性「小脚」 | 宋体、Times New Roman、Georgia | 正文印刷、长文阅读 |
| 无衬线体（Sans-serif） | 笔画末端干净，没有装饰 | 微软雅黑、Helvetica、Roboto | 屏幕显示、UI 界面 |
| 等宽体（Monospace） | 每个字符宽度相同 | Consolas、Source Code Pro、Fira Code | 代码编辑器、终端 |
我的经验：做移动端 UI 时，无衬线体是首选。衬线体在小字号下笔画容易糊成一团，我踩过这个坑——一个新闻 App 的正文用了衬线体，结果在低分辨率屏上阅读体验极差。
1.2 字体格式进化史
字体格式这玩意儿，说白了就是「怎么把字形数据装进文件里」。我入行那会儿还在用 TTF，现在 WOFF2 已经是标配了。
| 格式 | 全称 | 压缩率 | 浏览器支持 | 我的建议 |
|---|---|---|---|---|
| TTF | TrueType Font | 无压缩 | 全平台 | 仅作 fallback |
| OTF | OpenType Font | 无压缩 | 全平台 | 设计稿用，线上少用 |
| WOFF | Web Open Font Format | 约 40% | 现代浏览器 | 备选方案 |
| WOFF2 | WOFF 2.0 | 约 60% | Chrome/Firefox/Safari 12+ | 首选格式 |
避坑指南：我曾经在项目中只用了 WOFF2，结果在旧版 Safari 上字体完全没加载。后来我学乖了——
@font-face 里至少配 WOFF2 + WOFF + TTF 三份，用 format() 让浏览器自己选。
1.3 字重与字宽
字重（font-weight）不是简单的「粗不粗」的问题。我见过有人把 font-weight: 600 当成「半粗体」用，结果在 Windows 上渲染出来跟 400 没区别——因为系统里根本没装那个字重的字体文件。
标准字重对照表：
| 数值 | 名称 | 常见字体 |
|---|---|---|
| 100 | Thin | 思源黑体 ExtraLight |
| 300 | Light | 微软雅黑 Light |
| 400 | Regular / Normal | 几乎所有字体 |
| 500 | Medium | Noto Sans SC Medium |
| 700 | Bold | 几乎所有字体 |
| 900 | Black | 思源黑体 Heavy |
字宽（font-stretch）在国内项目中用得少，但做多语言适配时会遇到。比如英文的 Condensed（压缩）和 Expanded（扩展）变体，在日文、韩文排版里很常见。
关键点：字重和字宽必须依赖对应的字体文件。你写
font-weight: 700，但只加载了 Regular 字重，浏览器会强行用算法「伪加粗」——那个效果，说实话，惨不忍睹。
1.4 行高与基线
行高（line-height）和基线（baseline）是排版里最容易出问题的两个概念。我调试过一个跨平台页面，iOS 和 Android 上文字垂直居中差了 2px，查了半天，问题就出在基线对齐上。
先看基线的位置：
- 基线（Baseline）：大部分字母「坐」的那条线
- 顶线（Ascender line）：小写字母的最高点
- 底线（Descender line）：小写字母的最低点
- 大写线（Cap height）：大写字母的高度
- x-height：小写字母 x 的高度，影响可读性
行高计算公式：
/* 推荐使用无单位值 */
line-height: 1.5; /* 相对于 font-size */
/* 或者 */
line-height: 24px; /* 固定值，不推荐 */
我的习惯：正文用
line-height: 1.6 到 1.8，标题用 1.2 到 1.4。无单位值的好处是——子元素继承时按自己的 font-size 重新计算，不会出现「父元素 16px 设了 24px 行高，子元素 32px 也继承 24px」的尴尬。
1.5 知识体系总览
下面这张图把本章的核心概念串起来了。我画图时习惯把「分类」和「格式」放在上层，因为它们是选字体的前置条件；「字重/字宽」和「行高/基线」是排版时的调参项。