字体文件延迟HTML渲染？这个细节很多人忽略了

你有没有遇到过这种情况：网页明明内容不多，加载速度也不慢，但文字却要等一会儿才显示出来，页面一开始空荡荡的，像是卡住了？尤其在手机上特别明显。其实这很可能不是网络问题，而是字体文件在“捣鬼”。

自定义字体拖慢页面显示

现在很多网站为了美观，不再使用系统自带的宋体、黑体，而是引入了 Web 字体，比如 woff2、woff 等格式的字体文件。这些字体通过 CSS 的 @font-face 加载。问题就出在这里——浏览器为了按设计样式展示文字，会等字体文件下载完成后再渲染文本内容。

举个例子，你在做一个企业官网，用了某款漂亮的中文手写体。这个字体文件有 2MB 多，用户打开页面时，浏览器发现没有本地缓存，就得从服务器下载。在这几秒里，原本该显示的文字区域就是空白，用户看到的就是“白屏”或只有图片和按钮，文字迟迟不出现。

FOIT 和 FOUT：字体加载的两种表现

这种现象有两个专业术语：FOIT（Flash of Invisible Text）和 FOUT（Flash of Unstyled Text）。前者是文字先隐身，等字体加载完再突然出现；后者是先用系统字体显示，等自定义字体加载完再切换。大多数现代浏览器默认采用 FOIT，也就是“看不见文字”，这就让用户觉得页面卡了。

怎么缓解这个问题？

最直接的办法是尽量少用大体积的自定义字体，尤其是中文字体，字形多，文件天然大。如果非要用，可以考虑只加载需要的字符子集，比如只包含标题里的几个字，而不是整个汉字库。

另一个实用技巧是在 CSS 中设置 font-display 属性。它能控制字体加载期间的显示行为。比如：

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

加上 font-display: swap; 后，浏览器会先用系统字体把文字撑出来，等自定义字体下载完再替换。虽然字体变了，但用户不会面对空白屏幕，体验就好很多。

还可以配合 local() 检查用户本地是否已安装该字体，减少请求：

@font-face {
  font-family: 'PingFang SC';
  src: local('PingFang SC'), url('pingfang.woff2') format('woff2');
}

这样，苹果设备用户可能直接调用系统字体，无需下载。

字体美化虽好，但别让用户体验为设计买单。一个加载缓慢的字体文件，可能让你辛苦做的网页在用户眼里变成了“打不开的破站”。合理使用，才能既好看又流畅。