字體家族
網頁上的字體設定，指定的是字型家族（英語：font family，也譯字族），對應排印學中的字體概念。一個字型家族包含多個字型（也叫字模；通用英語稱font，CSS稱font face），字型之間以字重（粗細）、風格（正斜體）等設置區分開來。字體設定給定的是幾個字族的列表，瀏覽器會依序嘗試使用並配合其他設置找出對應的字型，用於顯示或打印。
文字的「字族」一般是通過層疊樣式表的font-family屬性指定，不過在(X)HTML中另可使用已淘汰的<font>...</font>元素。在兩種系統中，指定字族的都是一套由逗號分開的列表。除了真正存在的字族，也可以使用通用字族指定某一大類的字體。一般都建議在請求的字體列表末尾加入一個通用字族，以關照沒有安裝對應字型的用戶。
.text { font-family: times, serif; font-size:14pt; font-style:italic; }
<p class="text">
以獨立 CSS stylesheet 方式達成的範例文字。
</p>
<p style="font-family: times, serif; font-size:14pt; font-style:italic">
以 inline CSS 方式達成的範例文字。
</p>
<p><i><font face="times, serif" size="3">
以淘汰且從未進標準的 FONT 方式達成的範例文字。
</font></i></p>
若以 CSS 套用的字型名稱當中有空格，應以引號（半形）括起。
.text { font-family: "calibri", Garamond, 'Comic Sans'; }
字族和字體
[編輯]無論是在東方還是西方的信息系統，都有混淆字體（字族）和字型（字模）的歷史，<font>...</font>元素的非標準「字族」選項稱為意為「字型」的face正是一大例證。至於在CSS中兩者偶爾混淆，基本上是因為字型文件內含的元數據沒有把內置的字型標為某字體一員，而是給每個字型分立了一個字體。這樣做又是因為較老的編輯器中字型選擇往往只能選擇四種字型（粗體開關、斜體開關），而字型的作者又想讓這些編輯器可以找到所有字型。
因此，在較老的頁面中，經常會看到諸如font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9'此類直接指定字型名稱的寫法；相應語義正確但不一定能被識別的寫法是font-family: 'Gill Sans', 'Heisei Mincho'; font-weight: 900。CSS2和CSS3的標準中從未對這種錯誤用法進行過提及，這本來也非瀏覽器或網頁書寫者應該負責的錯誤。
通用字族
[編輯]字族選擇中可以使用「通用字族」（generic font family）指定某一大類的字體，至於選擇成哪個則是取決於用戶和系統的設定。[1] 舉例來說，在 Microsoft Windows 中使用預設設定的 Firefox，會將 serif 以 Times New Roman 顯示，並將 sans-serif 以 Arial 顯示。
不少瀏覽器允許用戶修改通用字族對應的字族。通常只有Serif（襯線體）、Sans-serif（無襯線體）和 Monospace（等距）三種提供設置；極少數的瀏覽器（如Konqueror）也允許修改 Cursive（手寫體）。
通用字族和字體置換（font substitution）是兩個不同的概念。前者替換的是模稜兩可的名稱，而後者是把有名的幾個字體換成尺寸兼容的替代品。前者是由瀏覽器處理，而後者一般是由操作系統處理。Windows默認找不到Helvetica時用Arial頂替，找不到Times用Times New Roman頂替，都是字體置換的表現。[2]
下表為幾個通用字族的範例。
| 字族設定 | 示例結果（取決於系統設定） |
|---|---|
| Cursive（手寫體） | 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Fantasy（另類體） | 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Monospace（等寬字體） | 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Sans-serif（無襯線體） | 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Serif（襯線體） | 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| Fangsong（仿宋體） | 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
中文字型
[編輯]中文字型和通用字族的對應情況為（可對照上表確認顯示效果）：
- sans-serif：目前都正確對應到黑體。過去簡體中文版Windows有將其對應到屬襯線體的中易宋體的問題，但在Windows 8中已修正。
- serif：一直以來都正確對應到明體／宋體。
- cursive：一般對應為楷書，但在Windows上設置的情況暫時不明。
- fantasy：中文另類體在作業系統上無預裝，因此無對應。
- Fangsong：是專門用來對應仿宋體的類別，但瀏覽器支持還不完全。
過去的作業系統及網頁瀏覽器皆由西方主導開發，缺乏配合中文字型的設定，需要手動指定字型列表。下表示範過去如何以目標用戶電腦預設內置的字型顯示想要的結果，例如楷書在 Microsoft Windows 是標楷體、中易楷體，在 Mac 是 BiauKai，在 Linux 是 UKai；明體／宋體在 Microsoft Windows 是新細明體、中易宋體，在 Linux 是 UMing；黑體在 Microsoft Windows 是微軟正黑體、微軟雅黑體、中易黑體，在 Linux 是文泉驛正黑、文泉驛微米黑、思源黑體等等。
| 字型 | 範例（視乎安裝的字型） |
|---|---|
| 楷書 | 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| 明體／宋體 | 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
| 黑體 | 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык |
如果通用字族可以正確對應，那就不該手動指定列表。手動指定列表的一大問題在於其費時費力：定表者需要研究多個作業系統的預裝字型情況，才能得到一個本屬「通用」範疇的字型列表，還會有被系統更新干擾的可能。
