CSS規範清楚的認識到，字型選擇是一個常見而且很重要的特性，所以設定字型的屬性就是樣式表中最常見的用途之一。

字型相關的屬性在CSS1就已經定義，CSS3又新增了font-stretch 和 font-size-adjust 這兩個屬性。

人們早已認識到字型選擇很重要，並在CSS2就支援可下載字型，也定義了 @font-face 相關屬性，但是並沒有得到瀏覽器的廣泛支援。直到CSS3，瀏覽器才開始支援 @font-face，使設計師可以在網頁中使用自己喜歡的任意字型。

字體系列
在CSS中，通過 font-family屬性來指定文字所使用的字體系列。語法格式為：

font-family: [<family-name> | <generic-family>] #
其中，family-name為字體系列的名稱；generic-family為通用字體系列的名稱。也就是說，font-family屬性的值既可以是具體的字體系列的名稱，也可以是通用字體系列的名稱。

CSS定義了 5 種通用字體系列，分別是serif、sans-serif、cursive、fantasy、monospace，font-family屬性可用使用其中的任何一種。如果希望文件使用一種通用字體系列中的某個字型，但並不關心是哪一種具體的字型，使用通用字體系列就比較合適。如：

body {
font-family: sans-serif;
}
這樣，瀏覽器就會從 sans-serif 字體系列中選擇一種字型，並將它應用到 body 元素。由於 font-family屬性具有繼承性，這種字型將會應用到 body 元素中的所有元素，除非有一種更特殊的選擇器將其覆蓋。

選擇字型時，要儘量選擇能夠引人注目（特別是標題），並且容易閱讀的字型。當然，設計師也可以選擇使用特定的字型。假如設計師希望所有 h1 標題都使用 Georgia 字型，可以使用以下宣告：

h1 {
font-family: Georgia;
}
這會使瀏覽器對所有 h1 標題都使用 Georgia 字型。當然，這個規則是假設訪問者的計算機上已經安裝了該字型。並且，設計師總是希望使用任何想要的字型，遺憾的是，如果訪問者的計算機上沒有安裝該字型，瀏覽器便會使用預設字型來顯示 h1 標題。

不過，不必萬念俱灰，通過結合特定字型和通用字體系列，可以建立與你預想相同的文件。可以使用以下規則，告訴瀏覽器使用 Georgia 字型（如果可用），如果 Georgia 字型不可用，就使用另外一種 serif 字型：

h1 {
font-family: Georgia, serif;
}
這時，如果訪問者的計算機上沒有安裝Georgia字型，但安裝了 Times 字型，瀏覽器就會使用 Times。儘管 Times 與 Georgia 並不完全匹配，但至少足夠接近。

 出於這個原因，強烈建議在所有 font-family 規則中，都提供一個通用字體系列。這樣一來，就提供了一條後路。

如果你對字型很熟悉，也可以在 font-family屬性中指定想要的字型，並按優先順序依次排列，中間用逗號分隔。如：

body {
font-family: Arial, SimSun, Helvetica, sans-serif;
}
瀏覽器會根據這個列表，按順序查詢這些字型，如果訪問者的計算機上安裝了第一種字型，就可以正確顯示。如果沒有安裝第一種字型，就自動切換到第二種、第三種字型，以此類推。如果所有字型都沒有找到，就會從 sans-serif 字體系列中選擇一種可用的字型。

利用這個特性，還可以實現英文和中文使用不同字型的效果。通常的做法是，把英文字型寫在前面，中文字型寫在後面。如：

p {
font-family: Arial, 'Microsoft YaHei'; /* Arial，微軟雅黑 */
}
這樣，瀏覽器會優先使用 Arial 字型顯示文字，由於中文字元不識別 Arial 字型，就會在後面的字型中繼續查詢，找到 Microsoft YaHei 字型後，便對中文應用該字型，這樣，就達到了中文和英文使用不同字型的效果。

在指定字型時，如果字型名稱中包含空格或中文或其他特殊字元，則要把整個字型名稱用放在引號中，可以使用單引號，也可以使用雙引號。並且，字型名稱不區分大小寫。

對於中文，有三種指定字型的方法：一種是直接使用中文字型名稱，一種是使用英文字型名稱，一種是使用字型的 unicode 碼。但是，在CSS文件中定義字型時，如果直接書寫中文，經常會出現亂碼，或者在某些瀏覽器下字型不生效。一個常用的解決辦法，是把中文字型名稱轉換為對應的英文字型名稱或unicode 碼。如，宋體的英文字型名稱為 SimSun、unicode 碼為 \5B8B\4F53，則可以寫成：

p {
font-family: SimSun;
}
也可以寫成：

p {
font-family: "\5B8B\4F53";
}
上述兩種寫法是等價的，可以自行選擇。為了方便查閱，幾種常用字型的中文名稱、英文名稱、unicode碼的對照關係見表 3‑1。

表 3-1 常見字型對照表
中文名稱    英文名稱    unicode
新細明體    PMingLiU    \65B0\7EC6\660E\4F53
細明體    MingLiU    \7EC6\660E\4F53
標楷體    DFKai-SB    \6807 \6977\4F53
黑體    SimHei    \9ED1\4F53
宋體    SimSun    \5B8B\4F53
新宋體    NSimSun    \65B0\5B8B\4F53
仿宋    FangSong    \4EFF\5B8B
楷體    KaiTi    \6977\4F53
仿宋_GB23122    FangSong_GB2312    \4EFF\5B8B_GB2312
楷體_GB2312    KaiTi_GB2312    \6977\4F53_GB2312
微軟正黑體    Microsoft JhengHei    \5FAE\x8F6F\6B63\9ED1\4F53
微軟雅黑    Microsoft YaHei    \5FAE\8F6F\96C5\9ED1
華文細黑    STXihei    \534E\6587\7EC6\9ED1
華文黑體    STHeiti    \534E\6587\9ED1\4F53
華文楷體    STKaiti    \534E\6587\6977\4F53
華文宋體    STSong    \534E\6587\5B8B\4F53
華文仿宋    STFangsong    \534E\6587\4EFF\5B8B
麗黑    ProLiHei Pro Medium    \4E3D\9ED1 Pro
麗宋    ProLiSong Pro Light    \4E3D\5B8B Pro
標楷體    BiauKai    \6807\6977\4F53
隸書    LiSu    \96B6\4E66
幼圓    YouYuan    \5E7C\5706
華文細黑    STXihei    \534E\6587\7EC6\9ED1
華文楷體    STKaiti    \534E\6587\6977\4F53
華文宋體    STSong    \534E\6587\5B8B\4F53
華文中宋    STZhongsong    \534E\6587\4E2D\5B8B
華文仿宋    STFangsong    \534E\6587\4EFF \5B8B
方正舒體    FZShuTi    \65B9\6B63\8212\4F53
方正姚體    FZYaoti    \65B9 \6B63\59DA\4F53
華文彩雲    STCaiyun    \534E\6587\5F69\4E91
華文琥珀    STHupo    \534E\6587\7425\73C0
華文隸書    STLiti    \534E\6587\96B6\4E66
華文行楷    STXingkai    \534E\6587\884C\6977
華文新魏    STXinwei    \534E\6587\65B0\9B4F
雖然CSS提供了備選字型的機制，但是，在CSS3之前，所有的字型都只能是Web安全字型（即預先安裝在主流個人計算機作業系統中的字型的子集）。直到CSS3中@font-face的出現，這個問題才徹底得到解決。

說明：

雖然 font-family屬性具有繼承性，但有幾個元素不會繼承父元素的字型設定，其中有表單的select、textarea 和input 元素。不過，可以強制它們繼承父元素的字型設定。程式碼如下：

input, select, textarea {
font-family: inherit;
}
關於作者

歪脖先生，十五年以上軟體開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭祕CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2使用者指南》、《Bootstrap3實用教程》，並全部在 GitHub 上開源。
--------------------- 
作者：ixygj197875 
來源：CSDN 
原文：https://blog.csdn.net/ixygj197875/article/details/79312540 
版權宣告：本文為博主原創文章，轉載請附上博文連結！