引言

在现代Web开发中，自定义字体已经成为提升用户体验的重要手段。然而，字体文件的加载往往会导致页面渲染延迟、布局抖动（Layout Shift）等问题。根据Web性能数据统计，字体加载问题导致的CLS（Cumulative Layout Shift）占据了用户体验问题的相当大比例。

字体加载的基本原理

浏览器字体加载流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
flowchart TD
    A[HTML解析] --> B[发现@font-face规则]
    B --> C[发起字体文件请求]
    C --> D{字体是否已缓存?}
    D -->|是| E[使用缓存字体]
    D -->|否| F[下载字体文件]
    F --> G[字体解码和验证]
    G --> H[字体就绪]
    H --> I[应用字体渲染]
    
    subgraph 渲染阻塞
        B --> J[文本渲染等待]
        J --> K{字体加载超时?}
        K -->|是| L[使用备用字体]
        K -->|否| M[等待字体加载完成]
        M --> H
    end

关键概念解析

FOIT (Flash of Invisible Text)

  • 现象: 文本在字体加载完成前不可见
  • 原因: 浏览器默认等待字体加载完成再显示文本
  • 影响: 用户体验差，内容可见性延迟

FOUT (Flash of Unstyled Text)

  • 现象: 先显示备用字体，字体加载后切换
  • 原因: 设置了font-display: swap
  • 影响: 布局抖动，但内容及时可见

字体格式对比

格式 压缩率 浏览器支持 特点
WOFF2 ⭐⭐⭐⭐⭐ 现代浏览器 最佳压缩，推荐使用
WOFF ⭐⭐⭐⭐ 广泛支持 良好压缩，兼容性好
TTF/OTF ⭐⭐ 全支持 未压缩，文件较大
EOT ⭐ IE only 已淘汰，不推荐使用

字体加载策略

基础 @font-face 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@font-face {
    font-family: 'Avenir';
    src: url('/fonts/Avenir-Black.woff2') format('woff2'),
    url('/fonts/Avenir-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/Avenir-Roman.woff2') format('woff2'),
    url('/fonts/Avenir-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Book';
    src: url('/fonts/Avenir-Book.woff2') format('woff2'),
    url('/fonts/Avenir-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('/fonts/Avenir-Medium.woff2') format('woff2'),
    url('/fonts/Avenir-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

字体预加载优化

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 在head中预加载关键字体 -->
<link 
  rel="preload" 
  href="/fonts/customfont.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin
>

<!-- 预连接字体CDN -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

字体显示控制

1
2
3
4
5
6
7
8
9
10
11
12
13
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/customfont.woff2') format('woff2');
  font-display: swap; /* 交换显示，避免FOIT */
  
  /* 其他可选值：
   * auto - 浏览器默认行为
   * block - 短时间阻塞（约3s）
   * swap - 立即使用备用字体
   * fallback - 短时间阻塞后交换
   * optional - 根据网络条件决定
   */
}

性能优化技巧

1. 字体子集化

只包含实际使用的字符，大幅减小文件体积：

1
2
3
4
5
# 使用pyftsubset工具创建子集
pyftsubset font.ttf \
  --text="你好世界abcdefg" \
  --flavor=woff2 \
  --output-file=font-subset.woff2

2. 智能加载策略

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 使用Font Face API进行更精细的控制
const font = new FontFace('CustomFont', 
  'url(/fonts/customfont.woff2)', 
  { 
    display: 'swap',
    weight: '400'
  }
);

// 加载字体并监听状态
font.load().then((loadedFont) => {
  document.fonts.add(loadedFont);
  
  // 字体加载完成后执行操作
  document.body.classList.add('fonts-loaded');
  
}).catch((error) => {
  console.error('字体加载失败:', error);
  // 降级处理
});

// 检查字体加载状态
document.fonts.ready.then(() => {
  console.log('所有字体已加载完成');
});

3. 缓存策略优化

1
2
3
4
5
6
# Nginx 配置字体缓存
location ~* \.(woff2|woff|ttf|otf)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
  add_header Access-Control-Allow-Origin "*";
}

最佳实践

渐进式字体加载方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 基础系统字体确保内容可见 */
body {
  font-family: system-ui, -apple-system, sans-serif;
}

/* 自定义字体加载后的样式 */
.fonts-loaded body {
  font-family: 'CustomFont', system-ui, sans-serif;
  /* 添加平滑过渡 */
  transition: font-family 0.3s ease;
}

/* 处理布局抖动 */
.fonts-loaded {
  /* 通过CSS变量控制布局 */
  --line-height-multiplier: 1.1;
}

监控和调试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 字体加载性能监控
const fontLoadObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('字体加载时间:', entry.loadTime);
    console.log('字体名称:', entry.name);
    
    // 发送性能数据到监控系统
    if (entry.loadTime > 1000) {
      trackSlowFontLoad(entry.name, entry.loadTime);
    }
  });
});

fontLoadObserver.observe({entryTypes: ['font']});

常见问题与解决方案

问题1：字体闪烁（FOUT）

解决方案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 使用font-display: optional */
@font-face {
  font-display: optional;
}

/* 或者使用CSS隐藏文本直到字体加载 */
body:not(.fonts-loaded) {
  visibility: hidden;
}

.fonts-loaded body {
  visibility: visible;
  animation: fadeIn 0.3s ease;
}

问题2：布局抖动

解决方案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 使用尺寸相近的备用字体 */
body {
  font-family: 'CustomFont', 'BackupFont', sans-serif;
}

/* 通过CSS变量控制尺寸 */
:root {
  --font-size-base: 16px;
  --line-height-base: 1.5;
}

body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

问题3：字体加载失败

解决方案:

1
2
3
4
5
6
7
8
9
10
11
12
13
// 字体加载失败降级处理
function loadFontWithFallback(fontUrl, fontName) {
  const font = new FontFace(fontName, `url(${fontUrl})`);
  
  return font.load().catch((error) => {
    console.warn(`字体 ${fontName} 加载失败，使用系统字体`);
    // 返回一个模拟的FontFace对象
    return Promise.resolve({
      family: fontName,
      status: 'error'
    });
  });
}

总结

字体加载优化是一个系统工程，需要从多个维度综合考虑：

  1. 技术选型: 优先使用WOFF2格式
  2. 加载策略: 合理使用font-display和预加载
  3. 性能监控: 实时监控字体加载性能
  4. 用户体验: 确保内容及时可见，减少布局抖动
  5. 容错处理: 做好字体加载失败的降级方案

通过本文介绍的优化策略，你可以显著提升网站的字体加载性能，为用户提供更流畅的浏览体验。记住，最好的优化策略往往是结合具体业务场景的定制化方案。

扩展阅读

本文基于实际项目经验总结，希望对你的前端开发工作有所帮助。如果有任何问题或建议，欢迎在评论区讨论。

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~