字体排版系统

建立清晰的文字层级

字体系统定义了字体族、字号比例、行高、字重等。使用模块化比例（Modular Scale）可以创建有视觉韵律的文字层级。

核心要点

字体族 — 主字体（正文）、展示字体（标题）、等宽字体（代码）
比例尺 — 常用比例：1.125(Major Second)、1.25(Major Third)、1.333(Perfect Fourth)
行高 — 正文 1.5-1.7，标题 1.1-1.3
字重 — 至少需要 Regular(400)、Medium(500)、Bold(700)

模块化字体比例

/* Base: 16px, Ratio: 1.25 (Major Third) */
--text-xs:   10px;  /* 16 / 1.25 / 1.25 */
--text-sm:   13px;  /* 16 / 1.25 */
--text-base: 16px;  /* Base */
--text-lg:   20px;  /* 16 * 1.25 */
--text-xl:   25px;  /* 16 * 1.25 * 1.25 */
--text-2xl:  31px;  /* 16 * 1.25^3 */
--text-3xl:  39px;  /* 16 * 1.25^4 */

选择有多字重的可变字体（Variable Fonts），既能减少请求数，又能精确控制字重。

上一课完成并继续