792 字
4 分钟
一次字体构建失败带来的教训
那天改完配置,执行 pnpm build,终端直接抛出:
[CannotFetchFontFile] Failed to fetch font filehttps://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/...本地开发一切正常,构建却失败了。原因很明确:Astro 的字体提供方默认会从 CDN 拉取字体文件,而当时网络无法访问那个地址。
构建阶段的外部依赖是隐藏风险
很多构建流程看起来是「本地执行」,实际上仍然依赖远程资源:字体、图标、封面图、第三方数据。只要其中任何一个不可达,构建就会中断。
把字体放回本地
解决方式不是给 CDN 加重试,而是把字体文件放进仓库,改用本地数据源:
{ 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 }, ],}改完之后,构建不再请求外部字体地址,失败问题也随之消失。
本地字体的处理流程
准备字体文件
从依赖包或官方渠道获取 woff2,放进
src/assets/fonts/。声明本地来源
在字体配置里把
source改为local,并列出每个字重对应的文件。构建时子集化
构建工具会根据页面实际用到的字符生成子集,减少体积。
检查预算
运行字体检查脚本,确认总大小没有超过约定上限。
子集化不等于可以随便加字体
中文全量字体动辄几 MB,即使子集化,多个字重叠加也会迅速膨胀。本站的字体预算约为 6 MB,实际构建后约 844 KB,仍然有空间,但不能无节制地增加。
| 项目 | 大小 |
|---|---|
| 西文正文字体 | 约 30 KB |
| 等宽字体 | 约 66 KB |
| 中文字体子集 | 约 749 KB |
字体优化的第一步不是压缩,而是删掉不需要的字重。
中文字重的现实限制
本站使用的中文字体只有一个 Medium 字重。标题需要的 600/700 会由浏览器合成,效果不如真实字重扎实。
这次故障留下的经验
- 构建流程里尽量不依赖远程资源;
- 能本地化的资源就本地化;
- 出问题时先看「构建阶段请求了什么」,而不是只盯着报错行。
字体问题看起来很小,但它提醒我:网站能否构建成功,取决于最薄弱的那条外部链路。把链路收回来,心里才踏实。
本站技术手记
连载中一次字体构建失败带来的教训
https://www.ycera.cn/posts/local-fonts-lesson/分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
换条路线
从其他文章中稳定抽取
最后更新于 ,距今已过 5 天
部分内容可能已过时