vue项目中字体文件过大(压缩字体文件)

时间：2024-12-18 07:31:48

目前做的一个vue项目当中引入了外部的字体文件，打包之后测试发现加载过慢，需等待较长时间才能看到效果，特此记录在vue项目中压缩字体的操作.

安装字蛛

字蛛是一个中文字体压缩器，通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
安装方法

npm install font-spider -g

使用方法

首先在项目录当中创建一个文件，并且在static文件夹下创建一个文件，目录文件如图：
目录结构
文件的代码如下图所示：
文件代码图示

@font-face {
  font-family: 'myFont';
  src: url('./');
}
#h {
  font-family: 'myFont';
}

文件的代码如下图所示：
文件代码图示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./static/" />
  </head>
  <body>
    <h1 >安全高收益</h1>
  </body>
</html>

里的h1标签id对应着里的文字样式

接着在项目目录下执行命令行：

font-spider ./

这里的就是刚刚创建的文件

执行完成之后会自动生成一个压缩之后的字体文件，通过下图可以看到压缩的效果还是非常明显的。
big为源文件，另一个为压缩之后的文件
完成之后在需要使用字体的vue页面引入使用即可
字体使用

End

相关文章