792 字
4 分钟
一次字体构建失败带来的教训

那天改完配置,执行 pnpm build,终端直接抛出:

构建错误
[CannotFetchFontFile] Failed to fetch font file
https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/...

本地开发一切正常,构建却失败了。原因很明确:Astro 的字体提供方默认会从 CDN 拉取字体文件,而当时网络无法访问那个地址。

构建阶段的外部依赖是隐藏风险#

很多构建流程看起来是「本地执行」,实际上仍然依赖远程资源:字体、图标、封面图、第三方数据。只要其中任何一个不可达,构建就会中断。

把字体放回本地#

解决方式不是给 CDN 加重试,而是把字体文件放进仓库,改用本地数据源:

fontConfig.ts
{
id: "outfit-body",
family: "Outfit",
role: "body",
source: "local",
variants: [
{ file: "src/assets/fonts/outfit-latin-400-normal.woff2", weight: 400 },
{ file: "src/assets/fonts/outfit-latin-500-normal.woff2", weight: 500 },
{ file: "src/assets/fonts/outfit-latin-700-normal.woff2", weight: 700 },
],
}

改完之后,构建不再请求外部字体地址,失败问题也随之消失。

本地字体的处理流程

  1. 准备字体文件

    从依赖包或官方渠道获取 woff2,放进 src/assets/fonts/。

  2. 声明本地来源

    在字体配置里把 source 改为 local,并列出每个字重对应的文件。

  3. 构建时子集化

    构建工具会根据页面实际用到的字符生成子集,减少体积。

  4. 检查预算

    运行字体检查脚本,确认总大小没有超过约定上限。

子集化不等于可以随便加字体#

中文全量字体动辄几 MB,即使子集化,多个字重叠加也会迅速膨胀。本站的字体预算约为 6 MB,实际构建后约 844 KB,仍然有空间,但不能无节制地增加。

项目大小
西文正文字体约 30 KB
等宽字体约 66 KB
中文字体子集约 749 KB

字体优化的第一步不是压缩,而是删掉不需要的字重。

中文字重的现实限制#

本站使用的中文字体只有一个 Medium 字重。标题需要的 600/700 会由浏览器合成,效果不如真实字重扎实。

这次故障留下的经验#

  • 构建流程里尽量不依赖远程资源;
  • 能本地化的资源就本地化;
  • 出问题时先看「构建阶段请求了什么」,而不是只盯着报错行。

字体问题看起来很小,但它提醒我:网站能否构建成功,取决于最薄弱的那条外部链路。把链路收回来,心里才踏实。

第 9 篇,共 12 篇本文属于系列

一次字体构建失败带来的教训
https://www.ycera.cn/posts/local-fonts-lesson/
作者
初月_Yuechu
发布于
2026-10-28
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取