vue中使用font-spider进行字体压缩,从10mb到2kb

2018-11-12 21:34:45 7,509 views

vue中使用font-spider进行字体压缩

1.安装font-spider

github  https://github.com/aui/gulp-font-spider
官网   http://font-spider.org/#use

yarn add font-spider -g --save-dev 或者 npm install font-spider -g --save-dev (最好是在项目外面全局安装)

2.安装成功

在命令行或者终端输入font-spider --version 查看是否安装成功

3.首先得先配置css文件引入font

我的项目目录结构大致如下
目录结构
src-----------------
   assets-----------
   fonts------------
       xxx.ttf-------
   css--------------
       index.css-----
index.html-------

3.1在index.css文件配置如下(比如要压缩PingFangSC-Medium这个字体)

你只需要有PingFangSC-Medium.ttf即可,其他不用

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

3.2在index.html中引入index.css

4.执行命令,进行压缩

font-spider ./index.html

如果成功,则会生成多个文件。只需要将ttf文件保留即可

22

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。