详解node字体压缩插件font-spider的用法


Posted in Javascript onSeptember 28, 2018

需求:

根据甲方要求,使用UI中指定字体

移动端默认显示系统默认字体,非系统默认字体需要自行引入字体包

字体包过大,字体包通常在几MB,严重拖累页面加载速度

分析:

文本内容为固定内容,不需要更新

文本内容大多为常用文字,大多文字用不上

插件:

font-spider
node 安装插件方法:npm install font-spider -g

操作:

安装插件

提取项目文字:
创建一个临时html,将所有项目需要用到的文本放到html中

在htmnl中写入样式代码,举个栗子:

@font-face {
  font-family: 'myfont';
  src: url('./common/assets/font/myfont.ttf');
}
* {
  font-family: 'myfont';
}

在命令提示窗口中,将目录展开到html所在的目录,输入指令:font-spider *.html 即可将该目录下所有html的字体抽离打包。

注意:

如果页面文本内容需要经常更新

如果需要对input表单内容同样应用定制字体请放弃本文章所述方法,可以考虑通过服务端渲染,动态生成字体包,或者,老老实实将完整的字体包引入页面

Javascript 相关文章推荐
html下载本地
Jun 19 Javascript
自适应图片大小的弹出窗口
Jul 27 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
JS canvas绘制五子棋的棋盘
May 28 #Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 #Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 #Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 #Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 #Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 #Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 #Javascript
You might like
PHP Echo字符串的连接格式
2016/03/07 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
2017/02/02 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
高等教育专业自荐信范文
2014/03/26 职场文书
警示教育活动总结
2014/05/05 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
致青春观后感
2015/06/09 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
python实现层次聚类的方法
2021/11/01 Python