前端字体压缩方案type
Post
status
Published
date
Apr 22, 2026
slug
font
summary
基于中文网字计划对前端字体分包和按需导入
tags
前端
字体
category
技术分享
icon
password
参考文章：
前言
最近的网页开发需要使用很多字体文件，看着设计同学发来的百多兆的字体文件陷入了沉思，于是研究了一下怎么压缩网页字体。
在网上查了几篇技术博客之后，了解到关于前端字体文件的几种优化方案，在上方参考文章中都有介绍，在此就不一一说明了，此处只记录次优选，即根据 中文网字计划 对字体包按字频进行分包，然后按需引入的方案。最优选方案是只打包网页中需要使用的文本的字体包，不采用此极致压缩的方案是因为不适合此项目，因为该项目没有确定的文本内容（例如用户昵称）。
方法一：手动对字体分包（适合少量字体的项目）
当项目所需字体文件较少，且不想引入额外插件和配置时，方案一足够简单有效，但缺点是在开发阶段项目内就会存在大量被分包的字体文件，看着有点乱。
步骤如下：
1、在线分包
将字体上传到在线工具网站，在线分包，然后下载解压，导入项目中
2、在项目导入字体
解压后的文件中有大量
.woff2 格式的小字体文件和一个 result.css 导入文件，其余文件可删除。将字体文件存入 assets/fonts/UranusPixel 目录，在项目中导入并使用，如下所示：注意：
(1).字体的
fontFamliy 名称必须使用在线工具中解析出的字体名称，当然，你也可以在导入后自定义命名。
(2).如果你将字体文件存入
public 目录，可能在打包项目时出现两份字体文件：一份来自打包时开发框架对引入字体文件的压缩，会在 assets 中存储开发框架打包的字体；另一份来自开发框架对 public 文件夹下的字体文件的复制。如果你必须使用 public 存储字体文件，且你打包后出现重复字体文件，那么打包后就要删除多余的那份字体文件——也就是开发框架从 public 里复制的那份。 方法二：使用插件 vite-plugin-font 自动切分（适合字体文件较多的项目）
当项目内需要导入的字体较多，且后续还可能导入其他字体，而你不想每次都手动分包再导入时，可采用此方案。但缺点是初次配置较为麻烦。
以下教程基于
Vite + Vue3 项目（且仅演示一次性导入全部字体的方案），该插件也支持其他主流前端开发框架，以及其他精细控制和高级使用方案，详情请参考官方说明文档：README_zh.md
KonghaYao
步骤如下：
1、安装依赖
2、导入插件
3、在项目导入字体
创建
fonts.ts 文件，导入需要压缩的的字体，并导出，示例如下：在项目的
main.ts 中导入 fonts.ts 文件，虽然是全局导入，但只在页面使用到该字体时才会加载。此时，在开发过程中，插件就会自动对字体进行分包并缓存，打包时再创建真正的分包字体文件，如果你的字体文件存放在
public 文件夹，需要如方案一的注意事项一样，打包后删除多余字体文件，此处不再赘述。4、使用字体
在项目的CSS文件中使用字体：
注意：
(1).在上方的演示中
Source Han Sans SC VF 是可变字体，字重范围为250-900，因此可以指定字体族名和字重；但 Chill Round Gothic 因为没有可变字体，是单独导入不同字重的静态字体，因此，在使用时需要注意族名不能用错。可变字体的族名统一，而静态字体的族名后常常跟字重字样，如
Chill Round Gothic + Bold ,如果不确定字体族名和字重大小，可参考上方方案一的步骤，在 在线字体分包器 中查看。(2).此插件还有更多精细控制的使用方法，此处不再赘述，详情请参考上方的
vite-plugin-font 官方文档。- 作者:默默
- 链接:https://blogs.muxidream.cn/technology/font
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
