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