自托管字体首先解决可控性
Fontsource 把开源字体按家族、字重和字符子集打包,开发者可以通过 NPM 安装或下载文件,并从自己的域名提供资源。这样能固定项目使用的版本,减少依赖外部字体 CDN 的连接,也便于离线应用和严格内容安全策略。
自托管并不会自动更快。如果一次引入所有字重、斜体和多语言字符,字体包可能比原来更大。我会先统计页面实际使用的正文、标题和粗体,只加载需要的文件,再用浏览器网络面板检查是否出现重复请求。
选字体时同时看中文回退链
许多西文字体不包含完整中文,中文字符会落到系统回退字体。如果英文标题与中文正文混排,需要在 Windows、macOS、Android 和 iOS 上比较字重、行高与标点位置,不能只在设计稿的一台电脑判断。
- 只安装真实使用的字体家族与字重;
- 优先变量字体时确认目标浏览器支持情况;
- 设置系统回退字体并测试中英文混排;
- 生产构建检查缓存头、预加载和文件路径。
字体许可必须随具体家族确认
Fontsource 收录的是开放许可字体,但不同家族可能使用 SIL OFL、Apache 或其他许可。商标、字体修改、再分发和应用内嵌要求应查看每个包的许可文件,不能用网站整体“开源”概括所有细节。
寻找和预览字体时,Google Fonts 仍是直观入口;确定要纳入前端工程后,再通过 Fontsource 锁定依赖和自托管。两者前后衔接,比从不明资源站下载单独字体文件更容易追溯。
性能优化要以实际渲染指标为准
字体预加载只适合首屏必用文件,预加载过多会与图片和样式争抢带宽。设置 font-display 时也要权衡文字尽快可见和字体切换造成的版式变化。最好在真实网络下看 LCP、CLS 和字体请求,而不是照抄通用配置。
升级包版本后抽查字形、字重映射和文件名,避免构建成功但视觉改变。把字体选择、许可和加载策略写进项目文档,后续维护者才能知道哪些资源可以替换,哪些是品牌的一部分。
