用font-spider精简字体库

211 阅读2分钟

我们如果使用自定义的字体会写如下代码

@font-face {
   font-family: 方正正粗黑简体;
   src: url("@/assets/css/font/方正正粗黑简体.TTF");
}
.title{
  font-family: 方正正粗黑简体;
}

引入的字体文件通常好几MB,用font-spider可以把页面使用到的字体保留,没用的的字体删除,从而达到精简字体库的目的。

全局安装font-spider

npm install font-spider -g

安装完后执行font-spider --version 查看是否成功安装。

压缩目录的时候不要在原有项目里面,新建个文件夹font-spider,把要压缩的字体放进去,并新建一个index.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,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>font spider</title>
    <style>
        @font-face {
            font-family: '方正正粗黑简体';
            src: url('./方正正粗黑简体.eot');
            src:
                url('./方正正粗黑简体.eot?#font-spider') format('embedded-opentype'),
                url('./方正正粗黑简体.woff') format('woff'),
                url('./方正正粗黑简体.ttf') format('truetype'),
                url('./方正正粗黑简体.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        .fangzheng-heicu{
          font-family: 方正正粗黑简体;
        }
    </style>
</head>
 
<body>
    <div>
        <div class="fangzheng-heicu">
            新市民积分贷
        </div>
    </div>
</body>
 
</html>

在这个html页面下“新市民积分贷”这几个字使用了新字体,所以压缩出来的字体库中只包含这几个字,体积当然小很多。

执行指令font-spider index.html

(base)   font-spider font-spider index.html
Font family: 方正正粗黑简体
Original size: 2076.764 KB
Include chars: 分市新民积贷
Chars length: 6
Font id: 400fc321aacba6cd5ce967485e0a981f
CSS selectors: .fangzheng-heicu
Font files:
File 方正正粗黑简体.eot created: 4.4 KB
File 方正正粗黑简体.woff created: 4.3 KB
File 方正正粗黑简体.ttf created: 4.212 KB
File 方正正粗黑简体.svg created: 3.722 KB

Screenshot 2023-11-23 at 17.00.56.png

执行成功后原本字体文件会被放在自动生成的.font-spider文件下,原目录下生成了eot/svg/ttf/woff等4中格式的字体库,选其中要用的即可,一般ttf或者woff。可以在线上的字体库预览网站(blog.luckly-mjw.cn/tool-show/i…)上看看新生成的字体。

Screenshot 2023-11-23 at 17.02.14.png 新字体库(./方正正粗黑体.TTF)再拿到自己的项目中去使用。这样的缺点就是要把所有用到的字都罗列出来,做一次筛选,有点麻烦,不过好像暂时没有更好的办法。