你是否发现，无论布局多精美，如果网页上的文字还是千篇一律的宋体或 Arial，整个设计就会显得廉价且缺乏品牌感。引入自定义的 Web 字体能瞬间提升网页的质感，但随之而来的往往是性能灾难：页面加载时文字突然消失（FOIT），或者先显示丑陋的系统字体再突然跳动（FOUT）。今天，我们就来彻底攻克 Web 字体加载的痛点，让你的网页既好看又流畅。
一、为什么你的网页字体加载那么慢？
字体文件通常比图片和代码大得多。特别是中文字体，一个完整的字库动辄几 MB 甚至十几 MB。如果在 CSS 中不加优化地直接引入，浏览器在字体下载完成前，往往会陷入"等待"状态。这就导致了两种极其糟糕的用户体验：
- FOIT（不可见文本闪烁）：字体没下载完之前，文字区域是一片空白。
- FOUT（未样式化文本闪烁）：先用默认字体显示，字体加载完后突然切换，导致文本块大小突变，页面发生重排和抖动。
二、核心利器：font-display 属性
为了解决上述问题，CSS 引入了 font-display 描述符。它被写在 @font-face 规则中，用来告诉浏览器在字体加载期间该如何表现。
@font-face {
font-family: 'MyCustomFont';
src: url('my-font.woff2') format('woff2');
font-display: swap; /* 核心配置 */
}以下是几个最常用的值及其适用场景：
swap（最常用）：提供一个极短的阻塞期（通常 100ms），如果字体没加载完，先用系统字体显示文本（避免白屏），等字体加载完再无缝替换。适合大多数正文和标题。block：在字体加载完成前，文本完全不可见（阻塞渲染）。适合图标字体（Icon Fonts）或绝对不能变形的 Logo，但不适合正文。fallback：折中方案。短暂阻塞后显示系统字体，如果字体加载较快（约 3s 内）则替换，否则本页面直接使用系统字体。optional：如果字体在极短时间内（约 100ms）没有加载好，浏览器将直接放弃加载，整个页面全程使用系统字体。适合移动端首屏性能要求极高的场景。
三、进阶优化：让字体加载飞起来
仅仅设置 font-display 还不够，我们需要从网络层面进行全方位优化：
1. 优先使用 WOFF2 格式
WOFF2 是目前压缩率最高的 Web 字体格式，比传统的 TTF 体积缩小 50% 以上，且主流浏览器均已完美支持。始终将 woff2 放在 src 的第一位。
2. 字体子集化（Subset）与 unicode-range
对于庞大的中文字体，千万不要全量加载！使用工具（如 font-spider）提取页面实际用到的汉字，生成几十 KB 的子集文件。或者使用 unicode-range 将字体拆分为拼音、基础汉字等区块，按需加载。
3. 使用 <link rel="preload"> 预加载
浏览器默认是在解析到 CSS 时才开始下载字体，这中间有延迟。你可以在 HTML 的 <head> 中提前告诉浏览器去下载关键字体：
<link rel="preload" href="my-font.woff2" as="font" type="font/woff2" crossorigin>配合 font-display: swap，这能极大缩短字体替换的时间，有效减少布局偏移（CLS）。
4. 构建健壮的字体栈（Font Stack）
永远不要只写一个字体名称。必须配置系统字体作为后备（Fallback），确保在 Web 字体加载失败时，页面依然有优雅的排版：
body {
font-family: 'MyCustomFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}四、避坑指南与最佳实践
- 不要无脑对全量中文字体使用
swap：如果一个 8MB 的中文字体在弱网下加载需要 3 秒，使用swap会导致用户盯着系统字体看了很久后，页面突然剧烈抖动。此时应优先考虑字体子集化，或在移动端使用optional。 - 跨域问题（CORS） ：如果你的字体文件托管在 CDN 或不同的域名下，加载失败往往是因为跨域限制。务必在服务器端配置
Access-Control-Allow-Origin响应头，并在preload标签中加上crossorigin属性。 - 按需加载字重 ：不要为了一个标题引入包含 9 种字重的完整字体包。只加载你实际用到的
400和700，能省下大量带宽。
结语：
Web 字体是提升网页设计感的关键，但性能永远是第一位的。通过合理运用 font-display、预加载和字体子集化，我们完全可以在视觉美感与加载速度之间找到完美的平衡。