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文件保留即可