1 前 言
1.1 場 景
我們在頁面展示時，為了更好的效果，一般使用了自定義的字型 @fant-face 。
之前在開發的時候使用了一些自定義字型，這裡總結下自己尋找的的一些處理辦法。
本文只列出了引入本地字型，網路的字型由於實踐不多，這裡介紹就少一些。
? 獻醜了 ?
2 正 文
2.1 本地字型
2.1.1 版 權
首先一定要注意這個問題
2.1.2 字型定義
一般情況定義如下：
@font-face {
font-family:"Regular";
src:url('../font/Regular.otf');
}
複製程式碼在某個我們要使用的該字型的classA上定義：
.classA {
font-family:"Regular";
}
複製程式碼2.1.3 字型壓縮
一般的中文字型都要8-10M，相對於整個工程來說太巨大，這裡提供自己實踐過的2種壓縮方法。
兩種都需要列舉出你使用過的字。
1 font-spider
支援
gulp構建外掛
我在使用時，剛開始一直沒壓縮成功
之後發現是由於自己下載的字型版本有點低
這裡列出一個找到的字型下載網址，覺得不錯：www.fontke.com/font/
2 Fontmin
這個比較方便的是有一個客戶端可以操作
2.1.4 字型載入
雖然有壓縮的功能，但必須提供出所有使用過的字型，而且我想的是我的專案中就預設一個好看的字型。
這樣就遇到一個問題，在第一次載入的時候，瀏覽器就會用一些時間來載入這個字型檔案。
而在載入完成之前，頁面就會空白，也就是FOIT（Flash of Invisible Text）
1 FOUT
FOUT（Flash of Unstyled Text）大意就是在字型載入完成前，瀏覽器會顯示font-family的順序字型
當載入完成後，才會替換成定義的字型，設定如下：
@font-face {
...
font-display: swap;
...
}
複製程式碼這樣的效果，就是會在頁面中看到的一個字型替換的效果?
2 FontFaceObserver
然後我想的是，有沒有什麼辦法可以判斷字型載入完成了呢？
安裝：
npm i fontfaceobserver
頁面中：
// css 中 @font-face 已定義好
import FontFaceObserver from 'fontfaceobserver'
loadfont(){
console.time("字型載入用時")
var ooo = new FontFaceObserver('Regular')
ooo.load().then(() =>{
document.getElementById('index').style.fontFamily = 'Regular'
console.timeEnd("字型載入用時")
})
},
複製程式碼同時可以加上一個loading的動畫，這樣效果就比較好了?
2.2 網路字型
2.2.1 引入
webfont：www.webfont.com/
找到的一個方式，沒有實際用過，不知道效果咋樣，有興趣的可以試試。
3 後 記
感謝支援。若不足之處，歡迎大家指出，共勉。
如果覺得不錯，記得 點贊，謝謝大家 ?
本文章採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。