1. 引入字體文件
在css中，font-family這個屬性我們再熟悉不過了，font-family 可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。但是這個的前提是用戶的系統安裝了你需要的字體，如果你設置的字體用戶的電腦上沒有呢？這就需要把字體文件放到服務端，當瀏覽器訪問頁面時，頁面同時加載該字體文件，這樣你設置的 font-family 屬性才能生效。
我們常用的字體圖標就需要引入字體文件，如：
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1646304036030') format('truetype');
}
頁面加載時，資源會同頁面一起加載
2. ttf、otf 和 ttc
我們常見的字體文件的后綴名有 ttf、otf、ttc，那這些文件有什么區別呢？
ttf ：True Type Font 縮寫，
是由美國Apple公司和Microsoft公司聯合提出的一種新型數字化字形描述技術。TT是一種彩色數字函數描述字體輪廓外形的一套內容豐富的指令集合，這些指令中包括字型構造、顏色填充、數字描述函數、流程條件控制、柵格處理器（TT處理器）控制，附加提示信息控制等指令。TT采用幾何學中的二次B樣條曲線及直線來描述字體的外形輪廓，二次B樣條曲線具有一階連續性和正切連續性。拋物線可由二次B樣條曲線來精確表示，更為復雜的字體外形可用B樣長曲線的數學特性以數條相接的二次B樣條曲線及直線來表示。描述TT字體的文件（內含TT字體描述信息、指令集、各種標記表格等）可能通用於MAC和PC平台。在Mac平台上，它以“Sfnt”資源的形式存放，在Windows平台上以TTF文件出現。為保證TT的跨平台兼容性，字體文件的數據格式采用Motorola式數據結構（高位在前，低位在后）存放。所有Intel 平台的TT解釋器在執行之前，只要進行適當的預處理即可。Windows的TT解釋器已包含在其GDI（圖形設備接口）中，所以任何Windows支持的輸出設備，都把TT解釋器已包含在其GDI（圖形設備接口）中，所以任何Windows支持的輸出設備，都能用TT字體輸出。
otf: Open Type Font 縮寫,也叫 type2 字體，
是由Microsoft和Adobe公司開發的另外一種字體格式。它也是一種輪廓字體，比TrueType更為強大，最明顯的一個好處就是可以在把PostScript字體嵌入到TrueType的軟件中。並且還支持多個平台，支持很大的字符集，還有版權保護。可以說它是Type 1和ueType的超集。
ttc：True Type Collection 縮寫，
TTC字體是TrueType字體集成文件(. TTC文件)，是在一單獨文件結構中包含多種字體,以便更有效地共享輪廓數據,當多種字體共享同一筆畫時,TTC技術可有效地減小字體文件的大小。TTC是幾個TTF合成的字庫，安裝后字體列表中會看到兩個以上的字體。兩個字體中大部分字都一樣時，可以將兩種字體做成一個TTC文件，常見的TTC字體，因為共享筆划數據，所以大多這個集合中的字體區別只是字符寬度不一樣，以便適應不同的版面排版要求。而TTF字體則只包含一種字型。
需要注意的是，otf 蘋果機與PC機都能很好應用的兼容字體，而 ttf 是PC機應用較好，蘋果機兼容性很差！06、07年開始OT全面普及，到現在，很多設計師已經不提供TT版本的作品了。
3. 字體的版權問題
這個往往是被我們前端工程師忽視的一個問題，可能是我們接觸到開源的東西太多了，以為字體嘛，拿來用就行，殊不知，如果不注意版權問題，往往會帶來不必要的麻煩。
比如說，我們常用的微軟雅黑字體，商用是要繳費的。比如說宣傳頁圖片，視頻字幕和嵌入到app中使用，都是侵權的。但是如果是用css的font-family，這個是直接調用系統中的字體，如果系統中有這個字體，那這個字體版權的所有者已經給該系統授權了，那就是不侵權的。如果通過@font-face引入微軟雅黑的字體文件，那就是侵權的，被發現了，版權方會告你的。