一、字体族（Font Family）与字体栈（Font Stack）

1.1 字体族分类与声明

CSS通过font-family属性定义文本使用的字体集合，采用字体族名称（如serif、sans-serif）或具体字体名称（如Arial、Times New Roman）。浏览器会按顺序尝试加载字体，直到找到可用选项。

p {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

关键点：

• 通用字体族：serif（衬线）、sans-serif（无衬线）、monospace（等宽）、cursive（手写体）、fantasy（装饰体）。
• 具体字体优先：将用户系统可能存在的字体（如Arial）放在通用字体族前，确保兼容性。

1.2 系统字体栈优化

现代CSS推荐使用系统字体栈，直接调用用户操作系统的默认字体，提升性能与一致性。例如：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

优势：

• 减少字体文件下载时间。
• 匹配用户习惯的阅读体验。

二、字体样式（Font Style）与变形控制

2.1 斜体与斜线体

font-style属性控制文本倾斜状态，常用值包括：

• normal：默认直立文本。
• italic：使用字体的斜体变体（如Times New Roman Italic）。
• oblique：强制倾斜（无独立斜体文件时由浏览器模拟）。

.emphasis {
  font-style: italic; /* 优先使用字体自带的斜体 */
}

区别：

• italic依赖字体设计，oblique为机械倾斜，后者可能影响可读性。

2.2 小型大写字母（Small Caps）

通过font-variant: small-caps实现小型大写效果，适用于标题或缩写：

.acronym {
  font-variant: small-caps; /* 输出类似 "HTML" 但字母高度降低 */
}

注意：需字体支持，否则浏览器可能模拟效果。

三、字重（Font Weight）与粗细控制

3.1 数值字重与关键字

font-weight支持关键字（normal、bold）和数值（100-900，步长100）：

.light { font-weight: 300; } /* 细体 */
.bold { font-weight: 700; }  /* 粗体 */
.heavy { font-weight: 900; } /* 超粗 */

规则：

• 若字体文件无对应字重，浏览器会智能调整（可能失真）。
• 推荐使用可变字体（Variable Fonts）实现平滑过渡。

3.2 可变字体（Variable Fonts）

可变字体通过单个文件提供字重、宽度、斜度等连续变化，显著减少HTTP请求：

@font-face {
  font-family: "MyVariableFont";
  src: url("myfont.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 50% 200%;
}
.dynamic-text {
  font-family: "MyVariableFont", sans-serif;
  font-weight: 650; /* 精确控制粗细 */
  font-stretch: 120%; /* 扩展宽度 */
}

优势：

• 性能优化：单文件替代多个字体变体。
• 设计自由：支持微调字体参数。

四、字高（Line Height）与行距优化

4.1 无单位值与比例控制

line-height支持无单位数值（推荐）、长度值或百分比：

.article {
  font-size: 16px;
  line-height: 1.5; /* 16px × 1.5 = 24px 行高 */
}

优势：

• 无单位值基于当前font-size计算，便于响应式设计。
• 避免绝对值导致的布局错乱。

4.2 垂直节奏与模块化间距

结合line-height与margin实现垂直节奏：

.post {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: calc(1.6 * 1rem); /* 基于行高设置间距 */
}

工具推荐：

• 使用CSS预处理器（如Sass）定义变量管理行高。
• 通过rem单位实现全局缩放。

五、字体加载策略与性能优化

5.1 font-display属性

控制字体加载期间的文本显示行为：

@font-face {
  font-family: "CustomFont";
  src: url("custom.woff2") format("woff2");
  font-display: swap; /* 优先显示回退字体，加载完成后替换 */
}

常用值：

• auto：浏览器默认行为（通常为block）。
• block：短暂隐藏文本，直到字体加载。
• swap：立即显示回退字体，避免FOIT（不可见文本闪烁）。
• fallback：短暂隐藏后切换，适合短文本。

5.2 预加载关键字体

通过<link rel="preload">提前加载字体：

<link rel="preload" href="custom.woff2" as="font" type="font/woff2" crossorigin>

优化效果：

• 减少关键渲染路径延迟。
• 需配合font-display: swap避免阻塞。

六、实战案例：响应式字体系统

案例：基于视口的流体字体

结合clamp()、vw单位与媒体查询实现自适应字体：

:root {
  --base-size: 16px;
  --scale-ratio: 1.2;
}
h1 {
  font-size: clamp(
    var(--base-size), /* 最小值 */
    4vw + 1rem,       /* 理想值：视口宽度4% + 1rem */
    2rem              /* 最大值 */
  );
  line-height: 1.2;
  margin-bottom: 1.5em;
}

效果：

• 小屏幕下保持可读性（不小于16px）。
• 大屏幕下适度放大（不超过2rem）。

七、常见问题与解决方案

问题1：中文字体体积过大

解决方案：

• 使用子集化工具（如pyftsubset）提取常用字符。
• 采用WOFF2格式压缩，体积比TTF减少40%。

问题2：跨平台字体渲染差异

解决方案：

• 测试主流操作系统（Windows/macOS/Linux）的渲染效果。
• 优先选择跨平台表现一致的字体（如Noto Sans）。

问题3：自定义字体未生效

排查步骤：

1. 检查@font-face的src路径是否正确。
2. 确认字体格式支持（WOFF2优先）。
3. 验证CORS策略（跨域字体需配置Access-Control-Allow-Origin）。

八、总结与进阶建议

核心原则

1. 渐进增强：优先使用系统字体，再通过@font-face加载自定义字体。
2. 性能优先：限制同时加载的字体数量（建议不超过3种）。
3. 可访问性：确保字重对比度符合WCAG标准（如正文与背景对比度≥4.5:1）。

进阶资源

• Google Fonts：免费开源字体库，支持按需加载。
• TypeScale：在线工具生成垂直节奏。
• CSS Fonts Module Level 4：最新规范草案。

通过掌握上述字体特性，开发者能够平衡设计美感与性能，打造高效、一致的网页体验。