Font-spider + Github Action自动构建字体文件
本文距离上次更新已过去 0 天，部分内容可能已经过时，请注意甄别。
更改：
更改于2024年12月7日
前言
不想看我废话可以直接跳转下部分
昨天回来，我发现网站字体突然寄掉了，这时我才想起来博客用的是别人提供的CDN文件字体，于是我去查看了一番，发现还真是寄掉了（后头推测应该是改了位置）。
于是我就找到了该文件字体的源文件，并把它下载下来供我网站内部直接使用。
但是，整个字体的大小有18MB。一开始，我将它放到了目录里面然后通过css文件直接调用，但是发现光这个字体文件就占了整个博客的80%，上传时间变长，这并不符合我的期望。接着，我开了个Source仓库，将字体上传，借用Jsdelivr来引用字体文件，但是由于本身的下载速度也不是很快，我在实测过程中发现至少半分钟才能下载完（也可能是网络问题）。
我就去求助，想看看群友是否有什么好的提议。
我：有没有什么减少字体文件体积的方法
A：转woff2
B：只用用到的字体
我开始忽略了B告诉我的，关注在A身上了
A：woff2
然后字体分包
然后pjax避免重复加载
参考 中文网字计划
后来找到了中文网字计划
不过我在投入字体文件后只是输出了resule.css这个关键文件，切割后的文件并没有输出，试了许多次的。
然后回到原本，将ttf转为了woff2，体积略有减小，但是还有10MB。后来B跟我说：
B：你用到了哪些
就只有哪些不就好了
我：🤔
我就去找了个字体文件编辑工具，但是工作量嘛。。。（有300多页），不过后来他就给我了个工具——Font spider
开始
本地使用
1.安装依赖
1
2
3
4
5
|
npm install font-spider -g
pnpm install font-spider -g
|
2.再新建一个文件夹（无要求）
文件夹内应该有如此文件
1
2
3
4
| (root)
- {你想要的名字}.html
- 源ttf文件
- {你想要的名字}.css (可选)
|
html中支持直接内嵌css，因此实际上无需新建css
3.html中输入以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: '{随便}';
src: url('./{你的ttf}') format('truetype');
font-weight: normal;
font-style: normal;
}
.myFont{
font-family: '{随便，建议与上头保持一致}';
}
</style>
</head>
<body>
<h1 class="myFont">
你好
</h1>
</body>
</html>
|
4.再键入
就能够输出一个新ttf文件包含 你 好两字
而.font-spider内部是原ttf文件
我个人是找了2500字+一些符号，平常够用了。
Github Action 自动构建
建议新开一个仓库或者分支
事实上你完全不需要自己手动渲染，你只需要提交到github即可的，但是仓库内文件需要有package-lock.json，不过由于用不到，实际上你可以在里面胡乱输入，比如我的：
1
2
3
4
5
| {
"dependencies": {
"pnpm": "9.14.2"
}
}
|
随后你需要新建位于.github/workflows下的{name}.yml文件，内部输入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
name: Font output
on:
workflow_dispatch:
push:
paths:
- 'index.html'
pull_request:
branches: [ "main" ]
jobs:
build:
name: Font output
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [22.x]
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: install font-spider
run: npm install -g font-spider
- name: 运行渲染程序
run: font-spider index.html
- name: upload files
uses: actions/upload-artifact@v4
with:
name: Latest Font file
path: ${{ github.workspace }}/{name}.ttf
retention-days: 1
|
此action会在index.html更改后才会构建，便于调控。
