使用font-slice对霞鹜文楷字体进行切片加载

霞鹜文楷字体ttf文件蛮大的，直接在网页中应用效果不太好，通过切片按需加载字体可以大幅优化加载速度。字体Github地址

对字体进行切片

1. 操作步骤

# 创建文件夹
mkdir font && cd font

# 安装依赖
pnpm add -D font-slice

# 创建执行文件
vim index.js

# 赋予执行权限
chmod +x index.js

# 运行
node ./index.js

2. index.js内容

const path = require('path');
const createFontSlice = require('font-slice');

createFontSlice({
  // 指定字体源文件
  fontPath: path.resolve(__dirname, 'LXGWWenKai-Regular.ttf'),
  // 定义输出目录
  outputDir: path.resolve(__dirname, './output'),
  // 定义字体名称
  fontFamily: 'LXGWWenKai Regular',
  // 切片完成后打开预览页
  preview: false,
})

使用生成的字体

1. 上传字体目录output，自行改名
2. head内引入

<link rel="stylesheet" href="./output/font.css">

3. 页面中使用

<style>
*:not([class*="icon"]):not(i){font-family:"LXGWWenKai Regular" !important}
</style>