解决字体体积过大

TIP

对于一些中文的字体，体积过大，导致页面加载缓慢，可以尝试使用以下方法进行优化。

使用字体压缩工具，如 Fontmin，将字体文件进行压缩。
使用字体子集化，只保留页面中用到的字符，减少字体文件大小。
使用字体服务，如 Google Fonts，这些服务会提供压缩后的字体文件，并且支持按需加载。
使用字体优化工具，如 FontOptimizer，对字体文件进行优化，如去除无用的字符、压缩文件大小等。
使用字体服务，如 FontCDN，这些服务会提供压缩后的字体文件，并且支持按需加载。
使用字体预加载，如 link[rel="preload"]，提前加载字体文件，提高页面加载速度。
使用字蛛，如 font-spider，自动检测页面中的字体，并生成对应的字体文件。

注意

使用那些提取字符的方法，不是很好，除非你的网站文字就那几个固定的字，否则没啥用，现在很多数据都是动态的，比如文章，用户评论等。

我也是找了很久才找到一个合适的解决方案，原理是提取要处理的字体包含的所有字符，然后拆分生成多个文件及 css 样式文件。换个说法就是一个字体文件5M拆分成20个小字体文件，然后分别生成对应的css样式文件。字体切片可以在支持所有字体的情况下，以较小的加载体积呈现页面。

使用方法

bash

npm install --save-dev font-slice

npm install --save-dev font-slice

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

createFontSlice({
  // fontPath
  fontPath: path.resolve(__dirname, '你的字体.ttf'),
  // outputDir
  outputDir: path.resolve(__dirname, './output'),
  // 是否需要在生成完成后打开预览页面，默认为 true，如果为 false 不会生成 index.html 及启动服务器
  preview: false,
})

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

createFontSlice({
  // fontPath
  fontPath: path.resolve(__dirname, '你的字体.ttf'),
  // outputDir
  outputDir: path.resolve(__dirname, './output'),
  // 是否需要在生成完成后打开预览页面，默认为 true，如果为 false 不会生成 index.html 及启动服务器
  preview: false,
})

这个需要用nodejs执行，然后把output文件夹放到你的项目里，然后引入对应的css文件即可。

WARNING

也就是优化字体，需要用nodejs把字体拆分成多个文件

然后你的（vue/react）项目，引入对应的css文件（一整个output文件夹，放到项目中，使用时引用css文件就行）。

我就简单说明一下，以vue为主

main.js入口文件

import './assets/output/font.css'

import './assets/output/font.css'

页面使用

css

.title{
  font-family: 'kunming';
}

.title{
  font-family: 'kunming';
}

详细的方法，可以看github地址，有详细的说明。

github 地址： https://github.com/voderl/font-slice

原文地址：https://voderl.cn/js/对中文字体进行切片/

补充

试了无数个插件，很多都不怎么样

unplugin-fonts/vite这个插件可以试一下，感觉还行，具体可以看官方文档试一下。

bash

npm i unplugin-fonts --save-dev

npm i unplugin-fonts --save-dev

import Unfonts from 'unplugin-fonts/vite'
 plugins: [
  vue(),
  Unfonts({ /* options */ })
 ]

import Unfonts from 'unplugin-fonts/vite'
 plugins: [
  vue(),
  Unfonts({ /* options */ })
 ]

npm包：https://www.npmjs.com/package/unplugin-fonts

这个博客也可以参考试一下，（我没测试过），看着还不错。https://blog.csdn.net/CbukeJ/article/details/148281020

解决字体体积过大 ​

使用那些提取字符的方法，不是很好，除非你的网站文字就那几个固定的字，否则没啥用，现在很多数据都是动态的，比如文章，用户评论等。 ​

使用方法 ​

补充 ​

解决字体体积过大

使用那些提取字符的方法，不是很好，除非你的网站文字就那几个固定的字，否则没啥用，现在很多数据都是动态的，比如文章，用户评论等。

使用方法

补充