使用font-spider进行字体压缩

字体太大的原因是中文汉字太多了，但是其中很大一部分生僻字我们是极少用到的，所以font-spider对字体进行压缩的原理，也只是将这部分极少用到的生僻字给剔除掉。

具体操作流程如下：

1、新建一个普通项目，创建如下目录结构：

2、index.css内容如下（虽然这里写了很多，但是你的fonts下只需要有Yahei.ttf就可以）：

@charset 'utf-8';
@font-face {font-family: Yahei;src:  url("../fonts/Yahei.eot");src:  url("../fonts/Yahei.eot?#font-spider") format("embedded-opentype"),url("../fonts/Yahei.woff2") format("woff2"),url("../fonts/Yahei.woff") format("woff"),url("../fonts/Yahei.ttf") format("truetype"),url("../fonts/Yahei.svg") format("svg");font-weight: normal;font-style: normal;
}
.ping {font-family: "Yahei";//方便全局使用color:#ffaaff;
}

3、index.html内容如下（注意，index.html是在根目录下，并不在src下）：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>title</title><link rel="stylesheet" href="./src/css/index.css"></head><body><div class="ping"></div></body>
</html>

4、安装 font-spider

npm install font-spider -g

5、安装成功后，执行命令，进行压缩（这个过程可能会有点慢，耐心等一等）

font-spider ./index.html

使用font-spider进行字体压缩相关推荐

字体压缩神器font-spider的使用
前言: 很多时候项目会遇到需要引入外部字体,不管是vue,小程序,react等等,但是pc端项目还好,把源文件放我们本地是可以的,小程序就不行了,因为体量比较小,对大小有限制. font-spider ...
中文字体压缩器——字蛛
网站多处使用中文特殊字体,而导入字体文件随便十几M,做成图片又不好维护,介绍一个简单实用的字体压缩工具. 中文字体压缩器--字蛛 css font-face 引入中文字体必备神器字蛛通过分析本地 C ...
导入外部字体且带字体压缩，以及判断h5，app，微信小游戏环境和字体的具体实现方式（egret为例）
1.压缩字体方式因为一般项目中不需要用到所有字体,所以需要将需要的字体在字体包提取出来重新打字体包我选择的压缩字体方式是 :使用fontmin进行字体压缩 fontmin官网为: https:// ...
中文字体压缩器并且转换(推荐阅读)
字蛛是一个中文字体压缩器官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题使用方法: npm i -g font-spider 在 ...
字蛛（FontSpider，中文字体压缩器）网页自由引入中文字体
之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...
如何应用font Awesome矢量字体图标介绍
最近做项目开发的时候,一开始做的时候,网页图标icon都是网上现找的,样式不统一先不说,统统都要引入就很麻烦了,要写各种图片路径,简直烦的不要不要的,后来不经意间接触到矢量图标这个东西,一下子来了兴趣 ...
font awesome矢量字体使用
官网地址:Font Awesome 中文网 – | 字体图标设置字体图标大小 awesome 是一种字体,控制图标的大小,是通过 font-size 来实现的,before 字体大小 font-si ...
网页使用Font Awesome图标字体时，css定义 content 属性
网页使用Font Awesome图标字体时,css定义 content 属性必不可少,如下所示: .icon:before { content: '\f005'; font-famil ...
在Unity中使用Font Awesome图标字体
Font Awesome 是一个前端用到的图标字体,简单说是个特殊的字体,里面不是文字都是图标. 用这种方法可以简单的做出即使放大很多也不会出现锯齿的图标,不过好像图标不需要放大很多的说.很好玩就是了 ...
字体压缩前端字体压缩
最近在写官网时候开开心心的将需求开发完成验收完毕,就在上线的时候你发生了奇怪的事情. 上线后通过域名访问发现要很久页面才能展示出来,后来通过排查发现服务器带宽小的可怜,机智的我有通过Network 和 ...

使用font-spider进行字体压缩

使用font-spider进行字体压缩相关推荐

最新文章

热门文章