前端引用字體@font-face的若干優化方法

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…