简介
Fontsource 解决的是「继续挂 Google Fonts」还是「把字体搬到自己服务器」这道选择题。前者省事，代价是每次加载都要连墙外域名；后者干净，但要自己下载字重、切格式、写一长串 @font-face，一个项目做完往往攒下一堆散落的字体文件。它把中间这段活干完了：每个字族打成一个 NPM 包，自托管变成装包、import、在 CSS 里写字体名三步。
站内索引了 2,103 个字体家族，Roboto、Inter 这类通用无衬线，到 Noto 的多语言字族、DejaVu、OpenDyslexic 这类冷门选择都在列。每个字族分可变包与静态包两条线，可变包默认导入就覆盖整个字重区间，样式表用 unicode-range 划出字符范围，浏览器只下载页面真正用到的片段。对做站的现实意义是：多语言页面不必再手工挑子集，也不必在首屏与体积之间反复试错——除非用的是中文字族，那仍要自己算。
适用人群
手上有 React、Vue、Next.js、Astro 这类构建链、又想把字体握在自己服务器上的人最适合：装包、import、改 font-family，三步替掉 Google Fonts，字体版本还能跟着 lockfile 一起锁死，CI 里装出来的是同一份文件。反过来，纯静态的老站、只用一两个图标字体、或者只想换掉博客标题字体的人不必绕这一圈——直接引 jsDelivr 上的版本化样式表更省事，也不必引入 Node 构建。
优缺点
- ✅ 字体以 NPM 包分发，装包、import、改 font-family 三步完成自托管，不用手写 @font-face。
- ✅ 可变字族一个包覆盖整个字重区间，比逐个字重堆 CSS 文件更好维护。
- ✅ 索引 2,103 个字体家族，Noto 多语言字族、DejaVu、OpenDyslexic 这类冷门选择都能找到。
- ✅ 不想上构建链时可以直接引 jsDelivr 上的版本化样式表，静态站与老项目也能用同一套字体。
- ❌ 站内与公开接口在国内直连不通，查字体、翻文档、调接口都得先有代理。
- ❌ 中文字族动辄几 MB，落地时仍要自己盯子集组合与首屏加载，不做取舍会拖慢页面。
使用方法
- 先确认项目有能处理 CSS 导入的构建链，Vite、Webpack、Next.js 都行。有构建链才装包：npm install @fontsource-variable/open-sans；没有构建链就直接抄 jsDelivr 的 link 标签，别为字体专门搭一套 Node 环境。
- 在应用入口 import “@fontsource-variable/open-sans”，CSS 里把 font-family 写成 “Open Sans Variable”；要固定字重的项目改装静态包 npm install @fontsource/open-sans，再按需引 “@fontsource/open-sans/300.css” 这样的单字重文件。
- 进阶做法：在字族页的 Get font 里选 Developer setup，NPM 与 CDN 两套片段会一起给出来，把版本号钉死在 package.json 或 URL 里——精确版本不可变、带长效缓存，升级靠改号不靠清缓存；再把它接进团队的开发工作流，新增字族一律走包、走评审清单，顺手用 Add to font set 把候选字体攒成一包再对稿。
- 两处需要注意：TypeScript 项目报 Cannot find module ‘@fontsource/…’ 时，在 src/globals.d.ts 里补 *.css 与 @fontsource/* 的 ambient 模块即可；另外正常体与斜体是两份文件，引了 900.css 不等于有 900 斜体，别指望一次导入包圆。
收费说明
完全免费，也不需要注册登录。全站没有价目表、订阅套餐或付费墙：NPM 包、jsDelivr 上的样式表与字体文件、浏览器端的转换工具、只读接口都可以直接取用。真正的成本在两处：一是字体本身的许可，字族各自按 OFL-1.1、Apache 这类开源协议发布，商用可以，但要保留原始版权与许可文本、不能单独售卖字体文件；二是公开接口的带宽，项目方希望高频调用者赞助，接口硬上限为每 10 秒 2500 次请求，正常建站取元数据远够用。自托管不额外收费，只有自愿赞助或买第三方 CDN 流量才花钱。
平台支持
形态是网站加在线应用，另有一组纯浏览器端的工具页，没有桌面端、手机 App 与离线包；字体最终通过 NPM 包或 CDN 落到你自己的服务器上，站内不托管你的站点。国内可用性要拆开看：站点与公开接口在国内直连不通，查字体、翻文档、调接口都需要自备代理；而 cdn.jsdelivr.net 上的 Fontsource 样式表国内可以直接打开，所以「只引一条 CSS、不装包」这条路线在国内站是可行的。取字体不需要账号，也不强制 Google 或 Apple 登录，更不依赖 Google Fonts 的接口。手机上只能浏览与预览，装包、跑构建还是要在开发机上做。
截图
