字体家族
网页上的字体设定，指定的是字型家族（英語：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 αβγ عربي язык |
如果通用字族可以正确对应，那就不该手动指定列表。手动指定列表的一大问题在于其费时费力：定表者需要研究多个作業系統的预装字型情况，才能得到一个本属“通用”范畴的字型列表，还会有被系统更新干扰的可能。
