一、字体选择的核心原则

1.1 可读性优先

字体选择的首要目标是确保内容清晰可读。根据W3C标准，正文建议使用14-16px的无衬线字体（如Arial、Helvetica），标题可适当增大至18-24px。研究表明，当行高与字体大小的比例在1.5:1时，阅读舒适度最佳。

<style>
  body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }
  h1 {
    font-size: 24px;
    line-height: 1.3;
  }
</style>

1.2 跨平台兼容性

不同操作系统预装的字体差异显著，需通过字体栈（Font Stack）指定备选方案。典型系统字体分布：

Windows：Segoe UI, Arial
macOS：San Francisco, Helvetica Neue
Linux：DejaVu Sans

推荐使用通用字体族名称作为最后备选：

font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

二、Web字体加载策略

2.1 字体格式选择

现代浏览器支持四种Web字体格式：
| 格式 | 兼容性 | 特点 |
|————|———————|—————————————|
| WOFF2 | 主流浏览器 | 压缩率最高（比TTF小40%） |
| WOFF | 广泛支持 | 基础Web字体格式 |
| TTF | 较旧浏览器 | 文件体积较大 |
| EOT | IE6-IE9 | 仅IE支持 |

最佳实践是提供WOFF2和WOFF格式：

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
}

2.2 性能优化技术

2.2.1 预加载关键字体

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

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

2.2.2 字体子集化

使用工具（如Glyphhanger）提取页面实际使用的字符，减少文件体积。例如中文网页可仅包含常用3500个汉字。

2.2.3 渐进式加载

通过font-display: swap实现文本即时显示，待字体加载后替换：

@font-face {
  font-family: 'CustomFont';
  font-display: swap;
  src: url('font.woff2') format('woff2');
}

三、响应式字体适配方案

3.1 视口单位（vw）方案

基于视口宽度的动态字体大小：

html {
  font-size: calc(14px + 0.5vw);
}

此方案在移动端表现良好，但需设置最小/最大值：

html {
  font-size: clamp(14px, 2vw + 10px, 24px);
}

3.2 媒体查询方案

针对不同设备尺寸设置断点：

@media (max-width: 768px) {
  body { font-size: 15px; }
}
@media (min-width: 1200px) {
  body { font-size: 18px; }
}

3.3 CSS变量方案

通过CSS变量实现全局控制：

:root {
  --base-font: 16px;
}
@media (max-width: 600px) {
  :root {
    --base-font: 14px;
  }
}
body {
  font-size: var(--base-font);
}

四、高级字体技术

4.1 可变字体（Variable Fonts）

单文件包含多个字重和轴向变化，显著减少HTTP请求：

@font-face {
  font-family: 'VariableFont';
  src: url('variable.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-stretch: 75% 125%;
}

使用时可通过CSS属性动态调整：

.dynamic-text {
  font-weight: 500;
  font-stretch: 100%;
}

4.2 字体加载事件处理

通过JavaScript监听字体加载状态：

document.fonts.ready.then(() => {
  console.log('所有字体已加载');
});
document.fonts.onloadingdone = (fontFaceSetEvent) => {
  console.log('特定字体加载完成', fontFaceSetEvent);
};

五、最佳实践与注意事项

5.1 性能监控指标

字体加载时间（应<500ms）
累积布局偏移（CLS<0.1）
首次内容绘制（FCP）

5.2 常见错误避免

忽略字体许可证（确保使用开源字体或已购商业授权）
过度使用自定义字体（正文建议使用系统字体）
未设置字体回退方案

5.3 无障碍设计要求

确保字体对比度≥4.5:1（WCAG标准）
提供字体大小调整选项
避免使用纯大写字母作为正文

六、工具推荐

字体检测：@font-face检测工具（如Font Squirrel Webfont Generator）
性能分析：Lighthouse中的字体加载专项审计
子集化工具：Glyphhanger、pyftsubset
可变字体编辑：FontForge、Glyphs

通过系统化的字体选择策略，开发者可在设计表达与性能优化间取得平衡。实际项目中建议采用渐进增强策略：基础内容使用系统字体保证快速加载，核心品牌字体通过预加载机制优化体验。对于高流量网站，可考虑使用CDN加速字体分发，或采用服务端字体渲染技术（如百度智能云提供的图像处理服务）生成字体图片作为备选方案。

HTML字体选择：从基础到进阶的完整指南