1、什麼是字型
字型是文字的外在形式，就是文字的風格，是文字的外衣。比如行書、楷書、草書，都是一種字型。同樣一個字每個人寫起來都會有差異，可以說每個人都有一套潛在的字型庫。對於web頁面來說，字型就是計算機上儲存的一套文字顯示方式。通過對文字進行一些特殊處理（比如末端加強）來提高不同環境中文字的可讀性。
比如同樣大小的文字，在不同字型下的可讀性是不同的。
一般來講，一款字型檔的誕生，要經過字型設計師的創意設計、字體制作人員一筆一劃的製作、修改，技術開發人員對字元進行編碼、新增程式指令、裝庫、開發安裝程式，測試人員對字型檔進行校對、軟體測試、相容性測試，生產部門對字型檔進行最終產品化和包裝上市等幾個環節。通常情況下文字跟字型庫是一對多的關係，所以對於多語言支援的web頁面，要求設計師在選用字型時不能光考慮一種語言的情況。
2、font-family
關於font-family的介紹大多數只是說明他可以設定文字中的字型名稱序列。其實font-family真正的作用是將一系列近似的字型按照優先順序順序組成一個列表，瀏覽器從第一項開始依次查詢，找到第一種可用的字型來顯示文字。
font-family: Times New Roman,"open-sans","幼圓",sans-serif
當瀏覽器顯示一個字元時，會首先從Times New Roman中尋找這個字元，如果找到就用Times New Roman字型來顯示這個字元。如果沒找到就去open-sans中尋找，如果找到就用該字型顯示字元，沒找到就會依次尋找下去，如果在通用字型庫sans-serif中也沒有找到就會用一個缺字元代替（通常是小方框）。
時間就是金錢Time is money.
比如上面這段程式碼，對於漢字部分瀏覽器會先去Times New Roman中查詢，沒有找到，接著再去open-sans中查詢，仍然沒有找到，繼續到“幼圓”中尋找，幼圓中可以找到對應字元則用該字型來顯示。對於英文部分可以在Times New Roman中尋找則會用該字型來顯示。
font-family中有時候字型加引號有時候不加引號。區別在於對字型名稱中空格的處理不同。不加引號時，忽略字型左右兩端的空白字元，單詞之間的空白字元被解釋為一個空白字元。比如font-family: Times New Roman , sans-serif。被解釋為font-family:Times New Roman,sans-serif。加引號時，需要保留引號內的所有空格。比如font-family:"Times New Roman",sans-serif。瀏覽器會去尋找“Times New Roman”這個字型。
3、通用字型族
w3c建議在定義字型是最後以一個類別結尾，例如sans-serif，來保證不同作業系統下網頁都能夠正確顯示。常見的字型族為serif（襯線字型）、sans-serif（非襯線字型），可以簡單理解為在所有字型都是失效的情況下，瀏覽器從字型族中選擇一種字型來顯示。
一種字型族代表了擁有某類特性的多種字型，字型族中字型的選擇完全有瀏覽器決定。設計者給出的字型應該儘可能覆蓋所有系統，而不應該依賴字型族。字型族一定要放到font-family的最後一位。
serif 襯線字型，通常是指使用末端加強原則的字型，通過在文字末端加入細小變化來改變小號文字的可讀性。
上述字型都是襯線字型，文字的末端使用了襯線。陳賢字型具有較高的可讀性，通常用於以大段文字作為表現形式的作品如報紙、書籍等。常見的襯線字型有Georgia, Garamond, Times New Roman, 中文的宋體等等。
sans-serif非襯線字型，襯線字型以外的所有字型都成為非襯線字型。非襯線字型的線條比較均勻，通常在藝術字、標題中的使用較多。
由於非襯線字型字條比較均勻，所以在小號文字下的可讀性不如襯線字型。常見的非襯線字型有Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圓、隸書等等。
綜上所述，襯線字型適合小號文字的顯示，如果使用非襯線字型要保證font-size足夠大，以確保正文內容的可讀性。11px下的英文推薦使用襯線字型，對於中文，無論如何都不推薦11px下顯示。
4、@font-face
@font-face是連結伺服器上的字型的.一種方式，就像制定圖片連結一樣，瀏覽器會根據這條指令把對應字型下載到本地快取，用它去修飾文字。
：字型名稱
：此值指的是你自定義的字型的存放路徑，可以是相對路徑也可以是絕路徑
：此值指的是你自定義的字型的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種型別：truetype, opentype,Web Open Font Format， embedded-opentype, svg等
：定義字型相關樣式,符合該樣式設定的文字會使用該字型顯示。
truetype()、opentype()這兩種格式在絕大多數瀏覽器上都能正常工作。Web Open Font Format()是Web字型中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支援元資料包的分離。Embedded Open Type()為IE的私有字型格式。svg()字型是基於SVG字型渲染的一種格式。下表中列出了這些格式的瀏覽器相容性。
