1 前 言
1.1 場 景
我們在頁面展示時，為了更好的效果憾赁，一般使用了自定義的字體 @fant-face 申窘。
之前在開發(fā)的時候使用了一些自定義字體婶希，這里總結下自己尋找的的一些處理辦法。
本文只列出了引入本地字體见剩，網(wǎng)絡的字體由于實踐不多杀糯，這里介紹就少一些。
?? 獻丑了 ??
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
官網(wǎng)：http://font-spider.org/
支持
gulp構建插件
我在使用時骂际，剛開始一直沒壓縮成功
之后發(fā)現(xiàn)是由于自己下載的字體版本有點低
這里列出一個找到的字體下載網(wǎng)址，覺得不錯：https://www.fontke.com/font/
2 Fontmin
官網(wǎng)：http://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 網(wǎng)絡字體
2.2.1 引入
webfont：https://www.webfont.com/
找到的一個方式，沒有實際用過降允，不知道效果咋樣恩闻，有興趣的可以試試。
3 后 記
感謝支持剧董。若不足之處幢尚，歡迎大家指出，共勉翅楼。
如果覺得不錯尉剩，記得 點贊，謝謝大家 ??
本文章采用 知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議 進行許可毅臊。
