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

需求:

前端精品教程:百度网盘下载

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

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

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

分析:

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

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

插件:

?


1

2

font-spider

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

操作:

安装插件

前端精品教程:百度网盘下载

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

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

?


1

2

3

4

5

6

7

@font-face {

  font-family: ‘myfont‘;

  src: url(‘./common/assets/font/myfont.ttf‘);

}

* {

  font-family: ‘myfont‘;

}

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

注意:

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

原文地址:https://www.cnblogs.com/sdmwtssss/p/9807649.html

时间: 2024-10-08 10:21:25

详解node字体压缩插件font-spider的用法的相关文章

详解Node.js API系列C/C++ Addons(3) 程序实例

http://blog.whattoc.com/2013/09/08/nodejs_api_addon_3/ 再续前文,前文介绍了node.js 的addon用法和google v8 引擎,下面,我们进入真正的编码,下面将会通过六个例子,学习node addon 范例,了解addon编程的特性 创建一个空项目 随机数模块 向模块传递参数 回调函数处理 线程处理 对象管理 创建一个空项目 vi modulename.cpp #include <node.h> void RegisterModul

经典栈溢出利用详解一例—Notepad++插件CCompletion

标 题: 经典栈溢出利用详解一例-Notepad++插件CCompletion 时 间: 2014-02-23,21:08:51 回顾 上篇文章介绍了Noetpad++程序中的一个插件CCompletion存在的一个因使用不安全的lstrcpyW函数拷贝字符串造成的栈溢出漏洞,并且确定了漏洞的大致利用入口,已经找到了可控EIP数据在整个输入数据中的精确位置,但是如果要写出可以利用的Shell Code还需是需要费一番功夫去调试和修正的.这篇文章就按照前面所说的那个漏洞的利用入口来详细的介绍一个可

详解mysql中的Using与On的用法

多用才可以体会各个关键字的用法啊... 原文来自[http://bbs.php100.com/read-htm-tid-148469.html] 在用Join进行多表联合查询时,我们通常使用On来建立两个表的关系.其实还有一个更方便的关键字,那就是Using.那么这两个关键字在使用上有啥区别呢?往下看.假设有如下两张表:    mysql> select * from pets; +---------+---------+--------+-----------+ | pets_id | ani

JSON详解+ C# String.Format格式说明+ C# ListView用法详解 很完整

JSON详解 C# String.Format格式说明 C# ListView用法详解 很完整

详解Linux中的cat文本输出命令用法

作系统 > LINUX > 详解Linux中的cat文本输出命令用法 Linux命令手册   发布时间:2016-01-14 14:14:35   作者:张映    我要评论 这篇文章主要介绍了Linux中的cat文本输出命令用法,是Linux入门学习中的基础知识,需要的朋友可以参考下 cat命令是linux下的一个文本输出命令,通常是用于观看某个文件的内容的.一.功能cat主要有三大功能:1.一次显示整个文件. 复制代码 代码如下: $ cat filename 2.从键盘创建一个文件. 复

AngularJS自定义指令详解(有分页插件代码)

前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><

详解Node.js API系列 Crypto加密模块(1)

MD5加密算法 算法简介 MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),在90年代初由Mit Laboratory for Computer Science和Rsa data security inc的Ronald l. rivest开发出来,经md2.md3和md4发展而来.它的作用是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式(就是把一个任意长度的字节串变换成一定长的大整数).不管是md2.md4还是md5,它们都需要

详解node+mongoose+mongoDb(mongoDb安装、运行,在node中链接)

一.序言 好久没写博客了,这次主要聊聊 node 和 mongoDb . 先说明一下技术栈  node + express + mongoose + mongoDb.这篇博客,主要讲述 mongoDb 的下载 .安装 . 配置 . 运行 以及如何在 node 项目中引入 mongoose 并 链接 mongoDb 操作数据库,最后再附带几个简单 创建 数据库.集合.域的实例. 二.目录 1. 下载.安装 mongoDb 2. 配置.运行 mongoDb 3. node项目中 链接 mongoDb

Microsoft PowerPoint文件管理控件Aspose.Slides新功能示例详解——支持字体回退

Aspose.Slides for .NET是独特的演示处理API,使应用程序能够读取,编写,修改和转换PowerPoint演示文稿.作为独立的API,它提供了管理PowerPoint关键功能的功能,例如管理文本,形状,表格和动画,向幻灯片添加音频和视频,预览幻灯片等等. 近期,Aspose.Slides for .NET更新至最新版v19.10,现在有一些非常有趣且实用的功能值得为大家讲解一下,比如新增支持字体回退,以及在占位符中设置提示文本,接下来通过一些简单的示例来为大家说明一下! 支持字