免费可靠的字体托管方案
中文字体包体积庞大,直接托管成本高昂。本文介绍如何借助字图分包工具对字体进行子集化处理,再上传至 GitHub 公开仓库,最后通过 jsDelivr CDN 免费加速分发,实现零成本、高可用的自托管字体方案。
- 次阅读
523 字
阅读约 2 分钟
前言
最近自己的博客在使用字图CDN时,被限流了,导致博客无法正常显示字体。所以就考虑自己部署一套字体,给自己的网站使用
托管流程
一个中文字体包的大小通常在10+MB,如果将字体文件放在自己的服务器或者对象存储上,无疑会产生很大的带宽流量成本,为了节省成本,我们可以使用一些免费的公开CDN,比如jsDelivr
jsDelivr拥有全球几千个节点,能够给国内和国外提供稳定的访问
-
创建字体仓库
首先我们需要创建一个Github公开仓库,用来存放字体文件。
-
字体分包
然后我们可以将字体文件进行分包,这样浏览文章的时候,浏览器会帮我们只加载需要的字体,从而达到节省带宽,优化博客访问速度的效果
字图CDN的在线分包工具:https://chinese-font.netlify.app/zh-cn/online-split/
使用方法:将字体
.ttf文件拖入,点击分包
分包完成后,会生成压缩包,里面包含了分包子集文件和用来导入字体的
result.css文件
-
上传字体分包文件到仓库
将字体分包文件的目录整个上传到Github仓库中
-
获取jsDelivr链接
jsDelivr官方CDN链接转换工具:https://www.jsdelivr.com/github
将字体的
result.css文件Github URL输入后,可以得到对应的jsDelivr CDN链接
-
在博客中引入jsDelivr CDN链接
在
global.css中引入字体@import url("https://cdn.jsdelivr.net/gh/game1024/web-fonts@main/LXGWBright/result.css"); :root { font-family: "LXGW Bright" }
最终效果
完成以上步骤后,我们的博客就能成功使用自托管字体了