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

 更新时间:2018年09月28日 11:48:04   投稿:laozhang  
在本篇文章中给大家详细讲述了node字体压缩插件font-spider的用法的相关知识点内容,有需要的朋友参考下。

需求:

根据甲方要求,使用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表单内容同样应用定制字体请放弃本文章所述方法,可以考虑通过服务端渲染,动态生成字体包,或者,老老实实将完整的字体包引入页面

相关文章

  • Windows7系统下如何安装nodejs16以上版本

    Windows7系统下如何安装nodejs16以上版本

    这篇文章主要给大家介绍了关于Windows7系统下如何安装nodejs16以上版本的相关资料,很多时候node.js的版本存在兼容,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • jwt在node中的应用实践(安装配置封装)

    jwt在node中的应用实践(安装配置封装)

    这篇文章主要为大家介绍了jwt在node中的应用实践包括安装配置封装,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • node.js中的fs.fstatSync方法使用说明

    node.js中的fs.fstatSync方法使用说明

    这篇文章主要介绍了node.js中的fs.fstatSync方法使用说明,本文介绍了fs.fstatSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • node.js中的fs.appendFile方法使用说明

    node.js中的fs.appendFile方法使用说明

    这篇文章主要介绍了node.js中的fs.appendFile方法使用说明,本文介绍了fs.appendFile方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • Node.js静态文件服务器改进版

    Node.js静态文件服务器改进版

    这篇文章主要介绍了Node.js静态文件服务器改进版的相关资料,需要的朋友可以参考下
    2016-01-01
  • Node.js实现的简易网页抓取功能示例

    Node.js实现的简易网页抓取功能示例

    这篇文章主要介绍了Node.js实现的简易网页抓取功能示例,本文使用了PhantomJS、node-phantomjs等库实现,需要的朋友可以参考下
    2014-12-12
  • 基于 Node.js 实现前后端分离

    基于 Node.js 实现前后端分离

    为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异。痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图探索一条全新的前后端分离模式。
    2016-04-04
  • Node搭建https服务器实例详解

    Node搭建https服务器实例详解

    这篇文章主要介绍了Node搭建https服务器的方法,结合实例形式详细分析了创建ssl证书以及node.js调用https模块搭建https服务器的相关操作技巧,需要的朋友可以参考下
    2023-04-04
  • 深入Node TCP模块的理解

    深入Node TCP模块的理解

    这篇文章主要介绍了深入Node TCP模块的理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • nodejs读取图片返回给浏览器显示

    nodejs读取图片返回给浏览器显示

    这篇文章主要为大家详细介绍了nodejs读取图片返回给浏览器显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07

最新评论