前端字体加载慢，提取所需字体压缩字体文件

前端vue页面加载ttf字体文件太慢，用webpack工具提取所需文字减小字体文件大小。

微信小程序的话用wx.loadFontFace方法就行，全局生效记得加上global属性

之前写页面加载其它字体ttf文件都好慢，每次都得十几秒才把字体显示出来，于是在网上查找有没有加快字体文件在页面显示的方法。好像都是基于font-spider来提取页面所需字体的文字，压缩成一个小的字体文件，有font-spider，font-spider -plus, Fontmin（这个是有界面的软件，直接把要转换的文字放到软件里就可以转换，看起来挺方便的）等。

一开始不知道为啥一直安装不上font-spider，windows有perl环境，也安装了python、Visual Studio和gyp，但运行npm install font-spider -g就是报错安装不上，后来用yarn global add不知怎的就安装好了。

最后找到一个别人刚写的webpack插件spa-font-spider-webpack-plugin，直接在启动或打包的时候提取所需文字，不用单独再将页面的文字复制到index.html里。用起来挺方便的，就是偶尔我字体的链接不知道为啥链接失败。
安装spa-font-spider-webpack-plugin（用npm也安装失败，但是同时使用npm和yarn的话好像会冲突）

yarn global add spa-font-spider-webpack-plugin

然后在webpack.dev.conf.js和webpack.prod.conf.js这两个文件里修改：

const SPAFontSpiderWebpackPlugin = require("spa-font-spider-webpack-plugin")

image.png

再在plugins里的末端加上

new SPAFontSpiderWebpackPlugin({
      fontFamilyPkgList: [
        {
          url: 'http://xxx.com/PingFang-SC-Regular.ttf',
          name: 'PingFangSC-Semibold'
        }
      ]
})

image.png

之后本地运行代码或打包到最后的时候，就会提示在打包字体。
我的vue项目不是vue-cli搭建的，添加webpack插件的方式可能有点差别。而且这插件好像是刚发的，不知道有没有问题。

补充：可以用FontCreator这个软件删掉字体文件的部分文字