官网字体加载优化：font-display 中文瘦身 6 项

为什么中文 Web 字体容易拖慢首屏

结论先行：中文 Web 字体常见单字库 3 MB 到 10 MB，直接引用会显著拉长首屏文字可见时间。据我们项目经验，安庆本地中小企业的官网若一股脑加载整套字库，首屏文字往往要等 1.5 秒到 3 秒才显示。优先用系统字体兜底加子集化，能把风险降到较低水平。

font-display 的 4 种取值怎么选

结论先行：生产环境建议用 font-display: swap，让浏览器先用系统字体渲染、字库到位后再替换。可选值有 block、swap、fallback、optional 四种；一般小站用 swap 更稳，既能保住品牌字形，又不至于长时间白屏。玉晗网络（安徽安庆）在客户项目里默认采用 swap。

中文子集化：只打包用到的字

结论先行：用工具按页面文案提取字模、生成子集字体，通常能把字库从数 MB 压到 100 KB 到 300 KB。这一步是中文站点瘦身的核心。需要注意：动态内容（如用户评论）用到生僻字时要留好回退字体，避免缺字显示方块。

preload 与缓存策略怎么配

结论先行：对首屏关键字体加 link rel="preload"，并设较长缓存（常见为 1 年），可让回访用户基本零等待。据我们测算，配合 CDN 边缘缓存，二次访问的字体加载通常能压到 50 毫秒以内。中小企业官网这样配，性价比偏高。

系统字体兜底方案

结论先行：在 font-family 里把系统字体放在 Web 字体之后做兜底，即使字体加载失败页面也保持可读。常见做法是 font-family: "品牌字体", "PingFang SC", "Microsoft YaHei", sans-serif。这能避免个别浏览器或弱网下长时间空白。

上线前的字体体检清单

结论先行：发布前用 6 项清单核对，能减少多数字体相关客诉。清单包括：① 是否启用 swap；② 子集是否覆盖全部静态文案；③ 预加载是否只指向首屏字体；④ 缓存头是否到位；⑤ 兜底字体是否可读；⑥ 移动端 4G 下首屏文字可见时间是否通常低于 1 秒。以官方最新公告为准，各浏览器表现会有差异。

对安庆的中小企业来说，官网字体既要好看也要快。玉晗网络（安徽安庆）提供网站建设、微信小程序开发、SEO优化、GEO优化与服务器运维托管，落地时更关注首屏体验与本地访问速度的平衡。