現(xiàn)在大家開發(fā)門戶站點(diǎn)都喜歡用一些特定字體贵涵，使其更獨(dú)特更美觀，我也是這么想的恰画。于是我用vue-cli 自己創(chuàng)建了一個項(xiàng)目宾茂，在其中引入字體文件后，問題大發(fā)了：
字體文件太大了拴还，我引用的方正準(zhǔn)圓簡體 有3M跨晴。發(fā)布之后的要加載很長一段時間頁面才會看到字體變化，太影響性能和用戶體驗(yàn)片林。
解決方案
必須壓縮字體
怎么壓縮端盆？
我在網(wǎng)上看到兩種解決方法，但只有第二種可行费封，下面我們一一道來焕妙，諸位請看：
1. font-spider 這個用不了
對于vue-cli 創(chuàng)建的項(xiàng)目，親測不可行孝偎，為啥呢访敌？大家仔細(xì)看font-spider 官網(wǎng)的這句話
字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮衣盾，同時生成跨瀏覽器使用的格式寺旺。
所以它是提取css文件和html文件里的字符再壓縮的爷抓。但vue-cli build 之后的部署文件是下面這個樣子的：
image.png
我們看唯一的一個html文件：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico> <title>officialsite</title>
<link href=/css/app.9e34393c.css rel=preload as=style>
<link href=/js/app.9bca0ae9.js rel=preload as=script>
<link href=/js/chunk-vendors.6051b49a.js rel=preload as=script>
<link href=/css/app.9e34393c.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but officialsite doesn't work properly without JavaScript enabled. Please enable
it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/chunk-vendors.6051b49a.js> </script>
<script src=/js/app.9bca0ae9.js> </script>
</body>
</html>
我們會發(fā)現(xiàn)，需要渲染的東西都是通過js文件來動態(tài)加載的阻塑，所以font-spider 根本無法捕獲 js里的字符蓝撇，自然也無法優(yōu)化了！
好大一個坑!!!
2. fontmin 這個可以用３旅А２巢！
首先走搁，下載軟件 http://ecomfe.github.io/fontmin/#app：
image.png
安裝完成后独柑，按照圖示將你需要的字體添加進(jìn)去就可以了：
image.png
之后就可以生成你需要的字體文件了！
