CSS font-family 语法
在 CSS 中，font-family 属性用于定义字体的类型。
语法：
font-family: family-name | generic-family;说明：
font-family 的使用非常简单，只需要设定 family-name（字体系列名称）和 generic-family（通用系列名称）即可。
1. family-name
family-name 是字体系列名称，比如 “Arial” 、 “Times New Roman” 、 “微软雅黑” 等。
family-name 可以是一种或多种字体，如果是多种字体，那么字体与字体之间使用英文逗号隔开，比如：
font-family: Tahoma, Arial, Helvetica;上面代码表示：当浏览器加载网页时，会从左边第 1 个字体开始判断。如果当前计算机有 Tahoma 字体，就使用 Tahoma 字体显示；如果没有，就继续判断当前计算机是否有 Arial 字体……如果连最后一种字体也没有，那么就使用计算机默认字体来显示。
注意: 字体名称可以加双引号，也可以不加双引号。但如果字体名称中间有空格，比如 Times New Roman 字体，就必须加上双引号。
/* 正确 */
font-family: Arial, Helvetica, "Times New Roman";
/* 错误 */
font-family: Arial, Helvetica, Times New Roman;
2. generic-family
generic-family 是通用系列名称，常用的通用字有 5 种：sans-serif（无衬线体）、serif（衬线体）、monospace（等宽体）、cursive（手写体）、fantasy（幻想体）。其他还有 system-ui、emoji、math 和 fangsong，但后面这几种目前支持度不高、用途不广，这里不再展开介绍。
（1）serif 与 sans-serif
serif 是衬线体，而 sans-serif 是无衬线体。所谓的 “有无” 衬线（serif），指的是字的笔画末端是否有装饰部分。
sans-serif（无衬线）完全抛弃装饰衬线，只剩下主干。因此这种造型简明有力、更有现代感。在网页开发中，我们主要是使用 sans-serif。
提示: “sans” 在法语中代表 “无”，因此 sans-serif 表示的就是 “无衬线体”。
需要注意的是，通用字体族名称（如 sans-serif）绝对不能加引号，这是新手极易犯的错误。比如：
/* 正确 */
font-family: Arial, sans-serif;
/* 错误 */
font-family: Arial, "sans-serif";（2）monospace
monospace 是等宽体，它表示所有的字母和数字都是同样的宽度。如果指定 monospace，就会自动套用系统预设的等宽字体。
对于中文来说，每个字在设计上都是等宽的，这没什么问题。但对于英文来说，就可能会造成排版上的困扰，比如 “W” 和 “i” 在宽度上就差很多。如果你的页面包含英文内容，并不十分推荐使用 monospace。
常用的等宽字体有 Courier New、Consolas、Source Code Pro 等。
（3）cursive 和 fantasy
cursive 是手写体，而 fantasy 是幻想体，两者看起来有点像。这 2 种类型过于 “奇特”，并不太适合在网页中使用。
手写体，看起来就像是毛笔或钢笔写出来的。对于中文来说，预设的手写体一般就是 “标楷体”。
幻想体，就是在手写体之上，多了一些装饰或纹路在字体上。对于中文环境下，计算机预设字体是不支持幻想体的，会自动使用 serif 或 sans-serif 代替。
CSS font-family 摘要
| 属于 | CSS 字体类型 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 是 |
| 默认值 | 取决于浏览器 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS font-family 示例
接下来，我们通过几个简单的例子来讲解一下 CSS font-family 属性是如何使用的。
示例 1：font-family 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:nth-child(1) { font-family: Arial; }
div:nth-child(2) { font-family: "Times New Roman"; }
div:nth-child(3) { font-family: "微软雅黑"; }
</style>
</head>
<body>
<div>www.lvyenet.com（Arial）</div>
<div>www.lvyenet.com（Times New Roman）</div>
<div>www.lvyenet.com（微软雅黑）</div>
</body>
</html>页面效果如下图所示。
分析：
对于 font-family 属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者中文的，则需要加上双引号。注意，这里的双引号是英文双引号，而不是中文双引号。
示例 2：font-family 使用多种字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { font-family: Arial, Helvetica, Verdana, sans-serif; }
</style>
</head>
<body>
<div>绿叶网（www.lvyenet.com）</div>
</body>
</html>页面效果如下图所示。
分析：
div { font-family: Arial, Helvetica, Verdana, sans-serif; }对于上面这句代码，小伙伴们可能会感到疑惑：“为什么要为元素定义多种字体类型呢？” 其实原因是这样的：每个人的电脑装的字体都不一样，有些字体有安装，但也有些字体没有安装。
上面代码的意思是：div 元素优先使用 “Arial 字体” 来显示，如果你的电脑没有装 “Arial 字体”，那就接着考虑 “Helvetica 字体”。如果你的电脑还是没有装 “Helvetica 字体”，那就接着考虑 “Verdana 字体”……以此类推。如果 Arial、Helvetica、Verdana 这 3 种字体都没有安装，那么 div 元素就会采用预设的 sans-serif 无衬线字体来显示。
此外有一个非常重要的技巧：如果 font-family 设置多种字体，那么应该将英文字体写在中文字体前面。比如写成：
font-family: "微软雅黑", Arial;因为 “微软雅黑” 本身是包含英文字符的，浏览器会优先使用微软雅黑来显示英文，导致英文看起来不如 Arial 漂亮。但如果写成：
font-family: Arial, "微软雅黑";，那么浏览器会优先用 Arial 显示英文，遇到 Arial 没有的汉字时再用微软雅黑，这样中英文都很完美。
Windows 和 Mac 都支持的字体
这里列出 Windows 和 Mac 都支持的字体，使用起来不会有太多问题。
