在Word中，我们往往会使用不同的字体，例如宋体、微软雅黑等。在CSS中，我们可以使用font-family属性来定义字体类型。

语法：

font-family: 字体1, 字体2, ... , 字体N;

说明：

font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。如果我们不定义font-family，浏览器默认字体类型一般是“宋体”。

举例：设置一种字体

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1{font-family: Arial;}
        #div2{font-family: "Times New Roman";}
        #div3{font-family: "微软雅黑";}
    </style>
</head>
<body>
    <div id="div1">Arial</div>
    <div id="div2">Times New Roman</div>
    <div id="div3">微软雅黑</div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者中文的，则需要加上双引号。注意，这里的双引号是英文双引号，而不是中文双引号。

举例：设置多种字体

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p{font-family:Arial,Verdana,Georgia;}
    </style>
</head>
<body>
    <p>Rome was not built in a day.</p>
</body>
</html>

浏览器预览效果如下图所示。

分析：

对于“p{font-family:Arial,Verdana,Georgia;}”这句代码，小伙伴们可能会感到疑惑：“为什么要为元素定义多个字体类型呢？”

其实原因是这样的：每个人的电脑装的字体都不一样，有些字体有安装，但也有些字体没有安装。p{font-family:Arial,Verdana,Georgia;}这一句的意思是：p元素优先使用“Aria字体”来显示，如果你的电脑没有装“Arial字体”，那就接着考虑“Verdana字体”。如果你的电脑还是没有装“Verdana字体”，那就接着考虑“Georgia字体”……以此类推。如果Arial、Verdana、Georgia字体都没有安装，那么p元素就会以默认字体（即宋体）来显示。

在实际开发中，比较美观的中文字体有微软雅黑、苹方，英文字体有Times New Roman 、Arial和Verdana（这个技巧对实际开发很重要）。