详解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 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
理解javascript async的用法
Aug 22 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
javascript Number 与 Math对象的介绍
Nov 17 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
JQuery验证工具类搜集整理
2013/01/16 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
JavaScript代码调试方法实例小结
2019/01/05 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
入党自我鉴定范文
2013/10/04 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
大学社团活动策划书
2014/01/26 职场文书
大学团日活动总结书
2015/05/11 职场文书
学校学期工作总结
2015/08/13 职场文书
小学科学课教学反思
2016/02/23 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python