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

赞 (0)

相关推荐

  • 基于Node.js实现压缩和解压缩的方法

    压缩格式 zip 和 gzip 是两种我们最常见到的压缩格式,当然,gzip 在 Windows 下很少有人接触. tar 是一种归档格式,它默认不会压缩,需要结合 gzip 来将最终的 tar 文件以 gzip 格式压缩成为一个 tar.gz 文件,通常我们会缩写为 tgz. 为什么没有提到 rar?因为它是专利保护的算法,你可以免费获得解压工具,而压缩工具是需要付费的.所以我们一般应用场景下,很少会提供 rar 压缩文件. 本文将分别介绍 gzip,tar,tgz 和 zip 的压缩和解压缩

  • Nodejs关于gzip/deflate压缩详解

    0x01.关于 写http时候,在接收http请求时候,出现乱码,后来发现是gzip没有解压. 关于gzip/deflate压缩,有放入管道压缩,和非管道压缩方法. 0x02.管道压缩 Node中的I/O是异步的,因此对磁盘和网络的读写需要通过回调函数来读取数据. 当内存中无法一次装下需要处理的数据时,或者一边读取一边处理更加高效时,我们就需要用到数据流. NodeJS中通过各种Stream来提供对数据流的操作. 官网提供了管道方法: 复制代码 代码如下: // client request e

  • Node.js服务器开启Gzip压缩教程

    Node.js服务器开启Gzip压缩教程

    Gzip是什么 复制大神们的解释吧: GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩.我们在Linux中经常会用到后缀为.gz的文件,它们就是GZIP格式的.现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式.HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站

  • node下使用UglifyJS压缩合并JS文件的方法

    现在UglifyJS的最新版本为 2.8.13,主要功能为JS的压缩和合并,下面直接进入教程: 安装: <span style="font-size:18px;color:#006600;">npm install uglify-js -g</span> 将uglifyjs安装为全局变量,方便我们在任何地方使用. <span style="color:#006600;">下面是shell命令的中文解释: * source-map

  • node.js实现简单的压缩/解压缩功能示例

    本文实例讲述了node.js实现简单的压缩/解压缩功能.分享给大家供大家参考,具体如下: 压缩的例子 非常简单的几行代码,就完成了本地文件的gzip压缩. var fs = require('fs'); var zlib = require('zlib'); var gzip = zlib.createGzip(); var inFile = fs.createReadStream('./extra/fileForCompress.txt'); var out = fs.createWriteS

  • Node4-5静态资源服务器实战以及优化压缩文件实例内容

    浏览器控制台看一下RequestHeader有一个Accept-Encoding,而RespondHeaders中也会有一个Content-Encoding和他进行对应. Accept-Encoding当我们的浏览器发起一个文件的请求时告诉服务器支持哪几种压缩方式,也就是服务器用这几种压缩方式浏览器都能解压,当服务器接收到请求后,知道浏览器支持的压缩方式,服务器就会自动识别其中一种进行压缩并且告诉浏览器自己用了哪个方式压缩,浏览器知道后就知道用哪种对应方式解压了 根据拓展名限制一下支持的几钟压缩

  • Node.js站点使用Nginx作反向代理时配置GZip压缩的教程

    node.js 开发的站点,如果你也是用了nginx实现反向代理. 那么在服务端可以轻松实现 gzip 压缩,让站点浏览更顺畅. 前提条件: node.js + nginx 反向代理. node.js 需要做的工作: express 4.0以下版本: app.use(express.compress()); //主要是这句 app.use(express.json()); app.use(express.urlencoded()); app.use(express.bodyParser());

  • 详解基于electron制作一个node压缩图片的桌面应用

    基于electron制作一个node压缩图片的桌面应用 下载地址:https://github.com/zenoslin/imagemin-electron/releases 项目源码Github:https://github.com/zenoslin/imagemin-electron 准备工作 我们来整理一下我们需要做什么: 压缩图片模块 获取文件路径 桌面应用生成 压缩图片 我们需要使用imagemin这个库来压缩图片,这里我们把这个库封装成压缩模块. const imagemin = r

  • NodeJS服务器实现gzip压缩的示例代码

    本文介绍了NodeJS服务器实现gzip压缩,分享给大家,具体如下: 在浏览器向服务器请求静态资源时,服务器为了减小在网络传输过程中消耗的流量和时间,都是将静态资源经过压缩后返回给服务器的,实现压缩的算法有 deflate 和 gzip 等,最常用的是 gzip 压缩. gzip 简介 在浏览器和服务器之间通过 gzip 压缩流实现传输的过程可以用下图表示. 当浏览器向服务器请求静态资源,服务器会将静态资源经过处理转换为压缩流,大大减小文件体积,然后将压缩流返回给浏览器,浏览器通过压缩的类型重新

  • Nodejs实现图片上传、压缩预览、定时删除功能

    前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番. 第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架. 1.引入基本配置 const Koa = require('koa');// koa框架 const Router = require('koa-router');// 接口必备 const cors = require('koa2-cors'); // 跨域必备 const tinify =

  • nodejs的压缩文件模块archiver用法示例

    本文实例讲述了nodejs的压缩文件模块archiver用法.分享给大家供大家参考,具体如下: 发现了个更好用的 zip-local https://www.npmjs.com/package/zip-local var zipper = require("zip-local"); zipper.sync.zip("/Users/xxx/xx/xx").compress().save("/Users/xxx/xx/xx.zip"); 如下代码实现

随机推荐