如何使用font-spider压缩中文文字 + debug的心路历程

最新推荐文章于 2024-08-09 08:00:42 发布

Andy01_

最新推荐文章于 2024-08-09 08:00:42 发布

阅读量337

点赞数

分类专栏： css 文章标签： javascript css node.js

本文链接：https://blog.csdn.net/m0_46427179/article/details/111754224

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、Html5中导入外部字体

在Html5中引入外部字体，只需要在你的css中声明下面两段函数即可，但是由于中文数量较多，导致文件大小较大，所以导致加载比较慢。

@font-face {
	/** 可以把这里的jelly替换成你的文字名称*/
    font-family: 'jelly';

	/** src请根据自己的url路径进行修改 */
    src:url("../../static/font/jelly.ttf") format("trueType");
}

.text {
    font-family: 'jelly';
}

为了加速这个加载过程，我们需要压缩文件的大小。因为在使用字体文件的过程中，我们只需要我们使用过的文字即可。

那么这里就需要使用到 font-spider(字蛛)， font-spider是通过浏览你的html文件，检索你代码中所使用的中文，并将其重新压缩为一个ttf文件。

二、font-spider 的安装过程

1. 去主界面左下角输入cmd，进入命令行，先输入 npm install font-spider -g 进行下载，直至停止。

2. 然后输入 font-spider --version 检查是否下载成功，成功结果如下。
在这里插入图片描述
3. 然后再去命令行输入font-spider加上你html文件的绝对路径。

3、解决bug的过程

我这边一开始虽然压缩成功了，但是检索的字体长度一直都是0，让我苦恼了很久。
在这里插入图片描述

最后发现原因居然是压根就没有使用中文，因为我把中文都放在了数组中，相当于只是调用了数组元素，而并非中文字体本身。

var textArr = [
    "雨霁风光.春分天气.千花百卉争明媚",
    "我欲穿花寻路.直入白云深处.浩气展虹霓",
    "白露团甘子.清晨散马蹄.圃开连石树.船渡入江溪",
    "忽如一夜春风来.千树万树梨花开.散入珠帘湿罗幕.狐裘不暖锦衾薄",
]

所以，你还需要在html中声明一个如下的class，然后导入你需要使用的字就可以了，最终压缩完就可以把删掉了。

<body>
	<div class ="text">
        "雨霁风光.春分天气.千花百卉争明媚",
        "我欲穿花寻路.直入白云深处.浩气展虹霓",
        "白露团甘子.清晨散马蹄.圃开连石树.船渡入江溪",
        "忽如一夜春风来.千树万树梨花开.散入珠帘湿罗幕.狐裘不暖锦衾薄",
    </div>
</body>

如果此时在网页上出现你需要的字体的文字，那么就基本算是成功了。
在这里插入图片描述
这是最终成功的结果，从2500KB压缩到了25KB。你可以直接使用压缩结束得到的那个ttf文件就行了。至于那个.font-spider文件里那个ttf，是用于备份的，使用哪个文件，比较一下两个文件大小就很清楚了。

不过需要注意的是，由于得到的ttf是静态的，所以一旦你需要加入新的文字，你还需要重复一遍这个压缩过程才行。