前端vue頁面加載ttf字體文件太慢，用webpack工具提取所需文字減小字體文件大小。

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

之前寫頁面加載其它字體ttf文件都好慢，每次都得十幾秒才把字體顯示出來，于是在網(wǎng)上查找有沒有加快字體文件在頁面顯示的方法。好像都是基于font-spider來提取頁面所需字體的文字，壓縮成一個(gè)小的字體文件，有font-spider，font-spider -plus, Fontmin（這個(gè)是有界面的軟件，直接把要轉(zhuǎn)換的文字放到軟件里就可以轉(zhuǎn)換，看起來挺方便的）等。

一開始不知道為啥一直安裝不上font-spider，windows有perl環(huán)境，也安裝了python、Visual Studio和gyp，但運(yùn)行npm install font-spider -g就是報(bào)錯(cuò)安裝不上，后來用yarn global add不知怎的就安裝好了。

最后找到一個(gè)別人剛寫的webpack插件spa-font-spider-webpack-plugin，直接在啟動(dòng)或打包的時(shí)候提取所需文字，不用單獨(dú)再將頁面的文字復(fù)制到index.html里。用起來挺方便的，就是偶爾我字體的鏈接不知道為啥鏈接失敗。
安裝spa-font-spider-webpack-plugin（用npm也安裝失敗，但是同時(shí)使用npm和yarn的話好像會(huì)沖突）

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

然后在webpack.dev.conf.js和webpack.prod.conf.js這兩個(gè)文件里修改：

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

之后本地運(yùn)行代碼或打包到最后的時(shí)候，就會(huì)提示在打包字體。
我的vue項(xiàng)目不是vue-cli搭建的，添加webpack插件的方式可能有點(diǎn)差別。而且這插件好像是剛發(fā)的，不知道有沒有問題。

補(bǔ)充：可以用FontCreator這個(gè)軟件刪掉字體文件的部分文字