Logo

尝试自助托管 web-font 的笔记

通过中文网字计划打包字体，托管于 ImageKit ，通过 Cloudflare 反代加速。

在2025年终40问发布以前，竟飞速产出了一篇装修笔记。

尝试自助托管web字体的初衷，实在是不知道字体配置为什么就是不生效，甚至要控制自己不要冒出一句“it worked on my computer”。

字体构建与分包

step:

  1. 进入中文网字计划在线字体分包 页面，
  2. 上传字体源文件（otf或ttf文件），点击开始打包
  3. 完成之后，复制分包结果中的字体名（css里就用这个字体名），点击右下角下载zip

当我对着Claude无能狂怒的时候，偶然看见了中文网字计划网站上有在线分包的功能，抱着虽然根本不懂什么叫分包但我也要先用用看的心情，尝试上传了一个字体文件。

对，就像是小时候不知道刀到底有多锋利，所以决定往身上比划，结果我的小鹿斑比阿贝贝上全是红色液体那样。

好的，分包网站告诉我，到时候引用这个result.css就可以了。

我：啊？那url呢？

大事不妙，我突然发现这可能只是一个预处理的程序，而全新，未知，折腾的托管步骤正在等待我。但是等等，右上角有一个“网站”，以我的本能直觉，作者会放一些指导性文档，至少我能知道从哪开始：

ImageKit：部署静态文件

steps：

  1. 登陆ImageKit
  2. 侧边栏 > Media Library > Folder Upload，上传分包文件夹
  3. 复制文件夹中的result.css

ImageKit！免费额度高达20G/月。对于字体部署来说已经充足。

上传点击路径

分包文件夹以Folder Upload的形式上传，提示框会提示文件夹会放到home/路径下。

ImageKit的上传提示框

最后找到result.css 点击🔗就能复制地址了。 CleanShot 2025-12-29 at 18.39.43@2x.png

Cloudflare：CDN 反代处理

steps:

  1. 登陆 Cloudflare ，在Workers&Pages新建一个应用；
  2. 选个“Start with hello-world”，写一个 worker name，点击部署；
  3. 点击 Edit Code，粘贴下方代码，再次点击部署。

部署点击

 1export default {
 2  async fetch(request, env, ctx) {
 3      const url = new URL(request.url);
 4      const redirectUrl = 'ik.imagekit.io'
 5      url.host = redirectUrl;
 6      return fetch(url).then(res => {
 7          return new Response(res.body, {
 8              headers: {
 9                  server: "nginx",
10                  "Access-Control-Allow-Origin": "*",
11                  "Cache-Control": "public, max-age=86400"
12              }
13          })
14      })
15  }
16};

这一步主要是通过 Cloudflare，将请求的 host 替换为 ImageKit 的域名，并转发请求，实现反向代理：

反向代理会拦截客户端的请求，再将请求转发到背后的源服务器（此处为 ImageKit）。客户端全程只与反向代理服务器（Cloudflare）通信，不会直接接触源服务器（ImageKit）的地址。

Worker 第一次部署成功后，就能在「Overview」页看见一个显眼的地址栏:workername.cloudflare_user_name.workers.dev，注意这个地址栏，这个就是我们最终导入字体文件url的前半部分了。

等到代码更新，第二次部署完成后，就可以引用被 Cloudflare 反代理的 ImageKit 的字体文件了。

CSS 实现

使用@import标签导入 CSS 文件

1// Glow Sans SC Extended
2@import url('https://{{Cloudflare worker的url地址}}/{{ImageKit 用户名及以后的地址}});
3
4// 如：
5@import url('https://workername.cloudflare_user_name.workers.dev/imagekit_user-name/GlowSansSC-Extended-Regular/result.css');

为元素添加 css

这里的字体名写的是第一步分包时的字体名字。

1body{
2    font-family: "Glow Sans SC Extended", sans-serif;
3}

结语

整个字体部署过程总体而言，就是先通过中文网字计划在线字体分包 打包字体，托管于 ImageKit ，最后通过 Cloudflare 反代加速。

中文网字计划的文档 对此指导得非常清晰，我的部署流程因此非常顺利，有惊无险。感谢中文网字计划，网站早期字体也是直接使用了中文网字计划提供的在线包。