使用font-spider提取文字,压缩文字,减小文件大小

13 篇文章 2 订阅
5 篇文章 0 订阅
本文介绍了在项目中遇到大字体需求时,如何通过font-spider工具筛选字体子集并结合Webpack打包进行压缩,以减少文件大小。具体步骤包括全局安装font-spider、创建示例文件、编写HTML和CSS,以及在命令行中运行font-spider来生成压缩字体文件。
摘要由CSDN通过智能技术生成

项目中遇到有特殊字体要求,且中文字体文件包比较大的时候,为了压缩字体文件一般有两种思路

一、让设计根据常用字将原文件筛选字体子集,只需要给出所需文字的字体包就好。

二、用font-spider对文字进行筛选子集生成新的字体文件-- 官网:font-spider.org - font spider 资源和信息。font-spider.org 是关于 font spider 信息的第一个最佳来源。在此,您还会发现与普遍关心的问题有关的话题。我们希望您找到您正在寻找的内容!icon-default.png?t=N7T8http://font-spider.org/

以下为简单(如果项目使用的webpack打包,可以采用配置的方式更为方便)的操作步骤: 

1、全局下载font-spider:

npm install font-spider -g

 2、检查font-spider是否下载成功:控制台输入font-spider -V ; 注意这里的-V必须大写;

font-spider -V

3、新建一个文件夹,准备以下文件:demo.html 、font.css、字体源文件

 

4、编写demo.html:具体那些字需要用到该字体就在对应写入对应的字,此处misans-regular这个字体仅数字需要用到,故仅写入1234567890.;

 

5、编写font.css 

6、在命令行输入:font-spider demo.html  ;  然后就可以生成对应的字体文件了

 

 注意: 压缩后的字体文件会替换字体的源文件,并且将源文件放到.font-spider文件夹里面;我们需要的字体文件是在外面这两更小的文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天府之绝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值