场景:前端在开发过程中有时候要用到特殊字体,但如果引用网上下载好的字体,它们都是一个全的字体文件,这种字体文件里往往包含了大量你用不到的文字字符,从而导致你引入的字体文件大小高达1M以上,这会严重影响页面渲染,会阻塞浏览器加载资源;因此,我们需要进行字体文件压缩,从中提取出要用到的字体,从而减少字体文件的大小。

备注:这些要使用特殊字体的字符一定要是固定的,不然就会出现压缩过的字符用的特殊字体起效了,有的未压缩过的字符就是系统默认字体,一句话里面字体不统一就好怪,如果实在把握不准具体哪些字符要压缩,那就只能扩大要压缩的字符了(虽然很蠢,但目前好像也只能这样了)。

解决方案:

方案一、使用字蛛

环境准备:需要确保机子安装了node跟python,如果没有安装python,在安装了node和font-spider之后使用font-spider命令行窗口会提示你:

'font-spider' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

这就很难受...

node跟python准备好之后安装font-spider

在全局cmd窗口执行:这里html文件路径根据你实际文件路径自由变换哈。

npm install font-spider -gfont-spider E:\project\demo\index.html

 注意:html中放的是要使用特殊字体的那些字符,这些文字一定要在css中使用到要压缩的特殊字体,不然执行压缩命令不会压缩成功的。

方案二:Fontmin插件(个人强烈推荐)

githup地址点右边→_→:Fontmin - 字体子集化方案

它有npm的方式也有客户端的方式可以使用,个人建议客户端方式(npm有时候会莫名其妙不好用,我装个客户端,怎么折腾都行。)

客户端有windows和苹果系统2种,自己选个适合自己的就行

安装包下载不下来取巧办法:githup有时候打开+下载都贼慢,F12选中下载按钮,从html节点中复制按钮下载地址,发给自己手机,手机浏览器下载会快很多,下载好了再转发给电脑。

安装后界面长这样:

点了生成后(原字体文件48k,压缩后1k),它会生成一堆压缩后的字体文件(各个格式都有,虽然你拖进去的只有ttf类型),证据如下:

之后你再复制这个压缩后的ttf字体文件,将它丢到你的项目里面就好了。收工~

祝大家再也不用为特殊字体发愁

前端字体压缩(免费简单易上手)相关推荐

  1. 实用工具分享:一个比ps简单的免费简单易上手的良心在线海报设计网站,关键还没水印

    1.说明: 工作中我相信或多或少都存在制作海报的需求,或者制作一个精美的软件安装说明等等(向下图一样),而我们大都不是专业平面设计师,花费时间折腾ps很明显得不偿失,并且ps的操作并不那么友好,那有没 ...

  2. 本行没有输入值结余隐藏_仓库库存管理系统,内含逻辑公式,自动结余库存!操作简单易上手...

    仓库库存管理系统,内含逻辑公式,自动结余库存!操作简单易上手 仓库出入库管理系统 入库单 出入库单号自动生成,如需修改前缀,可根据提示自行修改.在设置中,根据实际情况对必须填写的项输入,方便后期可自动 ...

  3. 一款简单易上手的ARM单片机开发IDE—STduino

    一款简单易上手的ARM单片机开发IDE-STduino 前言 STduino介绍 前言 第一眼看到这个IDE,第一反应就是名字有点像TrueSTUDIO,然后我上网查了一下,当然是没有关系的,只能说是 ...

  4. focusky怎么制作html5,一款简单易上手的3D动态PPT制作软件Focusky

    原标题:一款简单易上手的3D动态PPT制作软件Focusky Focusky动画演示大师 是一款傻瓜式的动画宣传片.微课.3D 动态 PPT 制作工具.通过缩放动作,让演示文档变成生动有趣的动画,制作 ...

  5. 简单绘图软件实现mfc大作业_生产流程图怎么做?简单易上手的流程图工具

    生产流程图是什么呢?首先,生产流程指的是在生产的过程中,劳动者通过利用一定的生产设备或工具,将各种原材料.半成品投入,按照一定顺序进行加工,最终得到成品产出的整个过程.而生产流程图则是使用图表符号的形 ...

  6. 弥散阴影html,超赞!一份简单易上手的青春弥散阴影修炼手册

    @笔戈科技 :一份简单易上手的青春弥散阴影修炼手册!九张长图/3种方法/3种效果/4个技巧,包你学会设计时下流行的骚气通透的弥散阴影效果. 投影法较为简单粗暴,但是投影效果较为粗糙缺乏立体感,投影颜色 ...

  7. 【C51】基于51单片机的简易频率计(附代码、无需外设、小白简单易上手)

    基于51单片机的简易频率计(无需外设.小白简单易上手)   代码较为简单,大概思路是通过定时器单位时间内外部中断上升沿触发的次数来计算实际频率. /基于51单片机的简易频率计#include<r ...

  8. 实用的3款视频添加水印软件分享,简单易上手

    如今刷短视频已经成为许多小伙伴饭后闲暇之余消遣的项目,也有不少人因此加入了创作短视频的队列.但是在分享前,最好是对自己的作品加上水印.为什么呢?第一是可以起到更好的宣传作用,第二是防止他人盗窃作品内容 ...

  9. python烟花视频_版本控制可视化神器Gource:简单易上手,效果恰似烟花秀

    原标题:版本控制可视化神器Gource:简单易上手,效果恰似烟花秀 视频加载中,请稍候... 自动播放

最新文章

  1. Non Hybrid Long Read Consensus Using Local De Bruijn Graph Assembly
  2. 消息总线(Spring Cloud Bus)
  3. SpringBoot中使用 Druid 数据库连接池, 后台SQL监控无效
  4. Storing XML in Relational Databases(2)
  5. .NET和Android解压缩处理
  6. HDU 5730——Shell Necklace
  7. 检查mysql的replication_MySQL Replication需要注意的问题
  8. react封装函数_React 模式-将函数作为 children 传入和 render prop - 极客教程
  9. 都说 VR 开发坑太多,结果华为云 5G Cloud VR 放了个大招儿!
  10. Nginx 404 500
  11. Java常见加密方式
  12. 三次Hermite插值解析
  13. NB-IOT (2)---移远BC26模块模组快速入门
  14. sncr脱硝技术流程图_脱硝技术介绍(SCR和SNCR)
  15. wps使用切片器,解决切片器灰色问题
  16. D. Berserk And Fireball
  17. 基于照片标记的广州市旅游流特征简单分析(上)
  18. 学习记录_美术部分_美术理论基础
  19. 08.音频系统:第002节_Android音频系统框架简述
  20. webdriver高级应用- 浏览器中新开标签页(Tab)

热门文章

  1. 自动控制原理1~3章课后练习题
  2. 建oracle簇表,详解ORACLE簇表、堆表、IOT表、分区表
  3. 浅谈执行力文化(zt)
  4. 谷歌浏览器的图片下载
  5. 蚂蚁数字科技与梆梆安全达成战略合作 共同构建移动端全链路的安全能力
  6. 今日头条校园招聘历年经典面试题汇总:C++研发岗
  7. SpringCloud 整合 Seata
  8. doc转docx文件会乱吗_docx怎么转换成doc?docx转doc方法汇总
  9. CF1225D Power Products (数论)
  10. IDEA 中无法彻底删除项目的问题