本文距离上次更新已过去 0 天，部分内容可能已经过时，请注意甄别。

前言

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

昨天回来，我发现网站字体突然寄掉了，这时我才想起来博客用的是别人提供的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.安装依赖

#npm
npm install font-spider -g

#pnpm
pnpm install font-spider -g

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

文件夹内应该有如此文件

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

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

3.html中输入以下内容

<!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>
    <!--link rel="stylesheet" href="./{你想要的名字}.css"-->
    <!-- ↑你可以选择外置css -->
    <style>
        @font-face {
            font-family: '{随便}';
  			src: url('./{你的ttf}')  format('truetype');
  			font-weight: normal;
  			font-style: normal;
		}

        .myFont{
            font-family: '{随便，建议与上头保持一致}';
        }
    </style>
</head>
 
<body>
    <!-- 这里对应的是myFont的ttf -->
    <h1 class="myFont">
        你好
    </h1>
</body>
 
</html>

4.再键入

1	font-spider {文件名}.html

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

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

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

Github Action 自动构建

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

{
    "dependencies": {
        "pnpm": "9.14.2"
        }
}

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

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Font output

on:
  workflow_dispatch:
  push:
    paths:
      - 'font/index.html'
     # 这里的作用是当你更改了font目录下的index.html文件后，才进行构建。你可以自定义
  pull_request:
    branches: [ "main" ]

jobs:
  build:
    name: Font output
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [22.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    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: cd font
    # 你将它们放在哪就打开对应目录即可
    - name: 运行渲染程序
      run: font-spider index.html
    
    - name: upload files
      uses: actions/upload-artifact@v4
      with:
        name: Latest Font file
        path: ${{ github.workspace }}/font/LXGWWenKaiMonoGBScreen.ttf
        retention-days: 1

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