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

官網：font-spider.org/

支援 gulp 構建外掛

我在使用時，剛開始一直沒壓縮成功

之後發現是由於自己下載的字型版本有點低

這裡列出一個找到的字型下載網址，覺得不錯：www.fontke.com/font/

2 Fontmin

官網：ecomfe.github.io/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 後 記

感謝支援。若不足之處，歡迎大家指出，共勉。

如果覺得不錯，記得 點贊，謝謝大家 ?

歡迎關注 我的： 【Github】 【掘 金】 【簡 書】

本文章採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。

出處為：github.com/xrkffgg/Too…