木灵鱼儿

木灵鱼儿

阅读:553

最后更新:2022/05/31/ 15:57:11

字体精简-字蛛font-spider

简介

记录一个精简字符的方式。利用字蛛做一些字体精简,本方式是针对英文精简,中文字体可以自行延展处理。

字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。

安装字蛛

github:font-spider

npm install font-spider -g

注意全局安装,省事,当然也可以局部,个人选择。

配置

安装完毕后我们需要新建一个html文件,这个文件里面需要配置一个自定义字体css,一个div,用于显示你需要精简的字体。

注意,被精简的字体文件必须是ttf格式。

创建一个index.html文件

<!DOCTYPE html>
<html lang="zh-CN">

<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" />
    <title>Document</title>
    <style>
        @font-face {
            font-family: "AbrilFatface-Regular";
            src: url("./AbrilFatface-Regular.eot");
            src: url("./AbrilFatface-Regular.eot?#font-spider") format("embedded-opentype"), url("./AbrilFatface-Regular.woff2") format("woff2"), url("./AbrilFatface-Regular.woff") format("woff"), url("./AbrilFatface-Regular.ttf") format("truetype"), url("./AbrilFatface-Regular.svg") format("svg");
            font-weight: normal;
            font-style: normal;
        }

        div {
            font-family: "AbrilFatface-Regular";
        }
    </style>
</head>

<body>
    <div>!"#$%&'()*+,-./0123456789:;
        <=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</div>

</body>

</html>

上述中,我声明了一个自定义的font-family,我们本地只需要准备一份ttf格式字体就行了,它能够url("./AbrilFatface-Regular.ttf")这样正确的被引入。就行了,其他的格式就算字体没有也没有关系。

字蛛会自动将@font-face中声明的字体格式一一生成,并精简。

所以不要纠结说我没有这个字体格式啊,我们用字蛛不就是为了生成这个格式嘛!

然后我们会有个div的class去显示声明调用该字体,因为字蛛会自动分析出页面使用的 WebFont 并进行按需压缩,所以必须要有元素使用这个字体。

在div元素中,我提供了目前字母数字特殊符号的文本,如果你精简时也是需要对这些字符做字体精简,那么直接copy就行了。

如果你有自己的字符,不在上述代码中,可自行添加上去。

js生成字符

 const divDom = document.querySelector("div");
 let str = "";
 let num = 32;

 for (; num < 127; num++) {
     str += String.fromCharCode(num);
 }

 divDom.innerHTML = str;

注意哦,动态生成的字符字蛛并不能抓取到,所以这个js生成好字符好自己复制再粘贴到html中保存

使用命令精简

html文件书写好后就可以使用命令了。

font-spider ./index.html

完成后,会在html文件对应目录生成一个文件夹.font-spider,这个文件夹里放的是原字体文件ttf,目录其他的则是精简好的字体。

为什么为这样,你可以在回头看下@font-face

至此,你已经可以进行字体精简了。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 553

相关文章