你的移动端网站，文字是不是总要“卡一下”才出来？

刷手机时遇到过这种尴尬吗？点开一个网页，标题和正文先是一片空白，或者突然弹出系统默认字体，半秒后又“啪”地换成设计稿里的那个字——手指都快点到按钮了，结果文字一挤，按钮跑偏了。这不是用户手滑，是你网站的字体加载没安排明白。

为什么自定义字体会拖慢你的移动端速度？

自定义字体文件动不动就几百KB。在地铁里、电梯里、信号不太稳的地方，浏览器得把整个文件下完，才能用它画出文字。
下载完成前，它有两个选择：要么啥也不显示（FOIT），要么先用系统字体顶上，等自定义字体到了再换（FOUT）。
前者让用户干等，后者会让页面“跳一下”——刚对好焦的段落，突然变高变宽，按钮被顶走，链接点歪了。

一个真实案例：我们帮一个做独立设计师服饰的品牌优化官网。他们用了三套英文字体，每套配4个字重，光移动端首屏就拉了近3MB字体资源。实测发现，在普通4G环境下，用户盯着空白等文字出现的时间明显偏长。后来只保留一套字体、两个最常用的字重，首屏文字“落地”快了不少。

如何精准控制字体文件的体积？

别一上来就把整套字体全塞进项目里。
先砍字重：设计稿里标着 Light / Regular / Bold / Black？但正文真需要 Light 吗？和设计师坐下来聊五分钟，大概率能砍掉一半。
再切字符集：如果网站只写英文，就别加载带中文、日文、希腊字母的完整包。用字体工具导出只含你实际用到的字符子集，体积常能缩到原来的十分之一。

中文网站更得小心。一个常规中文字体，轻松几MB起步。这时候别硬扛，优先选支持“按需生成”的字体服务，或者直接用厂商提供的网络字体方案——它们能在用户打开页面时，动态打包只含当前页出现汉字的极小字体包。
另外，分清轻重缓急：“关键字体”是首屏大标题、行动按钮上的字，必须第一时间可用；而文章正文、页脚说明这类内容，完全可以用系统字体撑住，等自定义字体慢慢加载也无妨。

怎样避免恼人的布局偏移和空白闪烁？

靠 font-display 这个CSS属性兜底。它就像给浏览器下指令：字体还没来，你先怎么干？来了之后，又怎么换？
移动端最实用的是 font-display: swap;——意思是：立刻用备用字体把文字打出来，等自定义字体下好了，再悄悄换掉。用户不会卡在白屏，也不会因为文字突然变大而误点。

你得把它写进 @font-face 规则里：

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

同时，记得在 CSS 的 font-family 声明里配上靠谱的备用字体，比如：font-family: 'MyFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
这样，加载期间用系统字体顶上，尺寸相近，换的时候几乎不抖。swap 不是完美解法，但它是在“看得见”和“长得准”之间，最实在的平衡点。

现代格式和预加载，哪个才是加速利器？

字体格式直接影响体积。现在一律优先用 WOFF2——压缩率比 WOFF 和 TTF 高得多，所有主流移动浏览器都支持。
写 src 的时候，把 WOFF2 放最前面，旧格式放后面兜底就行。

对真正关键的字体（比如首页主标题那个字），可以加一道 preload：
在 HTML 的 <head> 里贴上这行：

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

相当于提前跟浏览器说：“这个字体很重要，别排队，插队下载。” 它能让关键字体抢在其他资源前开始加载，大幅减少甚至消除切换感。但别滥用——预加载太多，反而会抢图、抢JS的带宽。通常，只给一个首屏最核心的字体开这个特权就够了。

第三方字体服务是救星还是坑？

Google Fonts、Adobe Fonts 这类服务省事，不用自己存字体、配CDN。但便利背后有代价：多一次外部域名解析，多一次TCP握手，服务器响应还未必稳定。
如果你决定用，一定要用官方最新推荐的方式嵌入。比如 Google Fonts，现在明确不建议用 @import，而是用 <link> + preconnect 组合。

今天就能改的一处细节：在 <head> 里，把这两行加到 Google Fonts <link> 标签前面：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

这能提前建立连接，省下几十毫秒。然后顺手检查你复制来的字体链接——参数里有没有带上 &display=swap？字重是不是只勾了 400 和 700？字符集有没有限定 &subset=latin？别直接粘贴设计软件生成的“全量链接”，那里面八成塞了一堆你根本用不上的东西。

今天下班前就能执行的一个检查清单

别等排期、别等重构，现在打开 Chrome 就能动手。
1️⃣ 打开无痕窗口，访问你的移动版网站 → 按 F12 打开开发者工具 → 切到「Network」→ 勾选「Disable cache」→ 刷新页面 → 在筛选栏输入 font，看看一共加载了几个字体文件？加起来多大？
2️⃣ 切到「Performance」面板 → 点左上角录制按钮 → 刷新页面 → 录完后看时间轴下方有没有标着「Layout Shift」的红色块——那是字体切换导致的页面乱跳。
3️⃣ 打开你项目的 CSS 文件，搜 @font-face，每个规则里是否都写了 font-display: swap;？没写的，现在就补上。
4️⃣ 再搜 font-family，看看声明里有没有靠谱的系统字体兜底？比如中文站至少要有 PingFang SC, Hiragino Sans GB, sans-serif 这类组合。

二十分钟做完，你就已经把字体体验的“最大漏洞”堵上了。