我們在頁面展示時，為了更好的效果，一般使用了自定義的字型@fant-face。
之前在開發的時候使用了一些自定義字型，這裡總結下自己尋找的的一些處理辦法。
本文只列出了引入本地字型，網路的字型由於實踐不多，這裡介紹就少一些。
? 獻醜了 ?
首先一定要注意這個問題一般情況定義如下：
@font-faceclassa上定義：
.classa8-10m，相對於整個工程來說太巨大，這裡提供自己實踐過的2種壓縮方法。
兩種都需要列舉出你使用過的字。
1 font-spider
官網：
支援gulp構建外掛程式
我在使用時，剛開始一直沒壓縮成功
2 fontmin
官網：這個比較方便的是有乙個客戶端可以操作
雖然有壓縮的功能，但必須提供出所有使用過的字型，而且我想的是我的專案中就預設乙個好看的字型。
這樣就遇到乙個問題，在第一次載入的時候，瀏覽器就會用一些時間來載入這個字型檔案。
而在載入完成之前，頁面就會空白，也就是foit（flash of invisible text）
1 fout
fout（flash of unstyled text）大意就是在字型載入完成前，瀏覽器會顯示font-family的順序字型
當載入完成後，才會替換成定義的字型，設定如下：
@font-face這樣的效果，就是會在頁面中看到的乙個字型替換的效果?2 fontfaceobserver
然後我想的是，有沒有什麼辦法可以判斷字型載入完成了呢？
安裝：npm i fontfaceobserver
頁面中：
// css 中 @font-face 已定義好
import fontfaceobserver from 'fontfaceobserver'
loadfont())
},
loading的動畫，這樣效果就比較好了?
webfont：
找到的乙個方式，沒有實際用過，不知道效果咋樣，有興趣的可以試試。
如果覺得不錯，記得 點讚，謝謝大家?
【github】
【掘 金】
【簡 書】
本文章採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。
font face使用自己的字型
font face使用自己的字型 瀏覽器支援 firefox chrome safari 以及 opera 支援 ttf true type fonts 和 otf opentype fonts 型別的字型。internet explorer 9 支援新的 font face 規則，但是僅支援 eo...
font face 網路字型的中文用法 一
如果你使用的windows xp作業系統，在瀏覽中文網頁時，你會發現網頁上的漢字基本上全部都是宋體。這是因為你的作業系統裡安裝了中文宋體字庫，而且被設定為預設字型。瀏覽器會用你的預設字型顯示網頁上的漢字。進入windows7 8時代，windows系統的預設字型變成了微軟雅黑，於是，所有的中文 上的...
CSS 中的自定義字型模組 font face
針對web頁面開發過程中的自定義字型需求，會用到css中的 font face模組。下面是 font face的語法規則。font face其中方括號內的屬性是可選屬性，屬性有多個取值，用來描述此引用字型的格式，幫助瀏覽器識別 瀏覽器相容性問題 其取值有以下幾種 1.turetype ttf win...