要为文本设置不同的字体，您可以使用 font-family 属性——这允许您指定浏览器要应用于所选元素的字体（或字体列表）。浏览器仅在访问网站的机器上可用时才会应用字体；否则，它将只使用浏览器 默认字体。一个简单的示例如下所示
cssp {
font-family: Arial;
}
这将使页面上的所有段落都采用 Arial 字体，该字体存在于任何计算机上。
Web 安全字体
说到字体可用性，只有特定数量的字体通常在所有系统上都可用，因此可以在没有太多顾虑的情况下使用。这些就是所谓的Web 安全字体。
大多数情况下，作为 Web 开发人员，我们希望对用于显示文本内容的字体有更具体的控制权。问题是如何找到一种方法来了解哪种字体在用于查看我们网页的计算机上可用。在每种情况下都没有办法知道这一点，但已知 Web 安全字体在大多数最常用的操作系统（Windows、macOS、最常见的 Linux 发行版、Android 和 iOS）的几乎所有实例中都可用。
随着操作系统的不断发展，实际 Web 安全字体的列表也会发生变化，但至少目前可以将以下字体视为 Web 安全字体（其中许多字体因 90 年代末和 21 世纪初微软的Web 核心字体计划而广受欢迎）
名称
通用类型
注释
Arial
sans-serif
通常认为最佳实践是还将Helvetica作为Arial的首选替代方案，因为尽管它们的字体外观几乎相同，但Helvetica被认为具有更好的形状，即使Arial的可用性更广。
Courier New
monospace
某些操作系统具有Courier New字体的替代（可能较旧）版本，称为Courier。最佳实践是将两者都使用，并将Courier New作为首选替代方案。
Georgia
serif
Times New Roman
serif
某些操作系统具有Times New Roman字体的替代（可能较旧）版本，称为Times。最佳实践是将两者都使用，并将Times New Roman作为首选替代方案。
Trebuchet MS
sans-serif
使用此字体时应谨慎——它在移动操作系统上并不广泛可用。
Verdana
sans-serif
注意：在各种资源中，cssfontstack.com 网站维护着 Windows 和 macOS 操作系统上可用的 Web 安全字体的列表，这可以帮助您确定您认为适合使用的字体。
注意：有一种方法可以将自定义字体与网页一起下载，以便您可以根据需要自定义字体使用方式：Web 字体。这稍微复杂一些，我们将在模块后面的 单独的文章 中讨论。
默认字体
CSS 为字体定义了五个通用名称：serif、sans-serif、monospace、cursive 和 fantasy。这些名称非常通用，从这些通用名称中使用的确切字体可能因每个浏览器和显示它们的每个操作系统而异。它代表了一种最坏情况的场景，在这种情况下，浏览器将尽最大努力提供看起来合适的字体。serif、sans-serif 和 monospace 非常容易预测，应该提供合理的结果。另一方面，cursive 和 fantasy 则不太容易预测，我们建议谨慎使用它们，并在使用过程中进行测试。
五个名称定义如下
术语
定义
示例
serif
具有衬线（在某些字体中，在笔画末端看到的装饰和其他小细节）的字体。
My big red elephant
body {
font-family: serif;
}
sans-serif
没有衬线的字体。
My big red elephant
body {
font-family: sans-serif;
}
monospace
每个字符宽度相同的字体，通常用于代码列表中。
My big red elephant
body {
font-family: monospace;
}
cursive
旨在模拟手写字体的字体，具有流畅、连接的笔画。
My big red elephant
body {
font-family: cursive;
}
fantasy
旨在装饰的字体。
My big red elephant
body {
font-family: fantasy;
}
字体栈
由于您无法保证网页上要使用的字体的可用性（即使是 Web 字体也可能由于某些原因而失败），您可以提供一个字体栈，以便浏览器可以从中选择多个字体。这涉及到一个由多个字体名称（用逗号分隔）组成的 font-family 值，例如：
cssp {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
在这种情况下，浏览器从列表开头开始，查看该字体是否在机器上可用。如果可用，它会将该字体应用于所选元素。如果不可用，它会继续下一个字体，依此类推。
最好在栈的末尾提供一个合适的通用字体名称，以便如果列出的字体都不可用，浏览器至少可以提供大致合适的字体。为了强调这一点，如果没有任何其他选项可用，则段落将使用浏览器的默认衬线字体（通常是 Times New Roman）——这对无衬线字体来说并不好！
注意：虽然您可以使用包含空格的字体系列名称，例如 Trebuchet MS，而无需引用名称，但为了避免转义错误，建议引用包含空格、数字或除连字符以外的其他标点符号的字体系列名称。
警告：任何可能被误解为通用系列名称或 CSS 全局关键字的字体系列名称都必须用引号括起来。虽然字体系列名称可以包含为
字体系列示例
让我们在之前的示例中添加内容，为段落提供一个无衬线字体
cssp {
color: red;
font-family: Helvetica, Arial, sans-serif;
}
这将得到以下结果
Tommy the cat
Well I remember it as though it were a meal ago…
Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
nestled its way into his mighty throat. Many a fat alley rat had met its
demise while staring point blank down the cavernous barrel of this awesome
prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
had many a story to tell. But it was a rare occasion such as this that he did.