前言#

不想看我废话可以直接跳转下部分

昨天回来，我发现网站字体突然寄掉了，这时我才想起来博客用的是别人提供的 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
#npm
2
npm install font-spider -g
3

4
#pnpm
5
pnpm install font-spider -g

2.再新建一个文件夹（无要求）

文件夹内应该有如此文件

1
(root)
2
  - {你想要的名字}.html
3
  - 源ttf文件
4
  - {你想要的名字}.css (可选)

html 中支持直接内嵌 css，因此实际上无需新建 css

3.html 中输入以下内容

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
    <title>Document</title>
9
    <!--link rel="stylesheet" href="./{你想要的名字}.css"-->
10
    <!-- ↑你可以选择外置css -->
11
    <style>
12
        @font-face {
13
            font-family: '{随便}';
14
        src: url('./{你的ttf}')  format('truetype');
15
        font-weight: normal;
16
        font-style: normal;
17
    }
18

19
        .myFont{
20
            font-family: '{随便，建议与上头保持一致}';
21
        }
22
    </style>
23
</head>
24

25
<body>
26
    <!-- 这里对应的是myFont的ttf -->
27
    <h1 class="myFont">
28
        你好
29
    </h1>
30
</body>
31

32
</html>

4.再键入

1
font-spider {文件名}.html

就能够输出一个新 ttf 文件包含 你 好两字

而.font-spider内部是原 ttf 文件

我个人是找了 2500 字+一些符号，平常够用了。

Github Action 自动构建#

建议新开一个仓库或者分支

事实上你完全不需要自己手动渲染，你只需要提交到 github 即可的，但是仓库内文件需要有package-lock.json，不过由于用不到，实际上你可以在里面胡乱输入，比如我的：

1
{
2
    "dependencies": {
3
        "pnpm": "9.14.2"
4
        }
5
}

随后你需要新建位于.github/workflows 下的{name}.yml文件，内部输入

1
name: Font output
2

3
on:
4
  workflow_dispatch:
5
  push:
6
    paths:
7
      - 'index.html'
8
     # 这里的作用是当你更改了index.html文件后，才进行构建。你可以自定义
9
  pull_request:
10
    branches: [ "main" ]
11

12
jobs:
13
  build:
14
    name: Font output
15
    runs-on: ubuntu-latest
16
    strategy:
17
      matrix:
18
        node-version: [22.x]
19
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
20

21
    steps:
22
    - uses: actions/checkout@v4
23
    - name: Use Node.js ${{ matrix.node-version }}
24
      uses: actions/setup-node@v4
25
      with:
26
        node-version: ${{ matrix.node-version }}
27
        cache: 'npm'
28
    - name: install font-spider
29
      run: npm install -g font-spider
30
    - name: 运行渲染程序
31
      run: font-spider index.html
32
    - name: upload files
33
      uses: actions/upload-artifact@v4
34
      with:
35
        name: Latest Font file
36
        path: ${{ github.workspace }}/{name}.ttf
37
        retention-days: 1
38
       # 输出文件只保留1天，可以更改，最大90天

此 action 会在index.html更改后才会构建，便于调控。

音乐

前言#

开始#

本地使用#

Github Action 自动构建#

评论