在写项目的过程中，常常会遇到给文字设置样式的场景，一般来讲，字体有类型、大小、粗细、风格、颜色等样式。
一、字体类型 font-family
1、设置一种字体
使用 font-family 设置字体时，若字体全称为一个单词，不需要加上双引号，若字体全称为多个单词，则需要加上双引号，表示这是一个整体，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
font-family: "Times New Roman";
}
p{
font-family: Arial;
}
</style>
</head>
<body>
<div>Like_Frost</div>
<div>Like_Frost</div>
<p>Like_Frost</p>
</body>
</html>
为 div 和 p 标签定义不同的字体，在浏览器中显示如下：
2、设置多种字体
当为元素定义多种字体类型时，浏览器会从定义的第一个字体开始检索，若当前浏览器支持第一种字体，则使用第一种字体，否则向后检索，直到检索到浏览器支持的字体，在未设置字体时，默认显示宋体，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div,p{
font-family: "Times New Roman",Arial;
}
</style>
</head>
<body>
<div>Like_Frost</div>
<div>Like_Frost</div>
<p>Like_Frost</p>
</body>
</html>
在浏览器中显示如下：
二、字体大小 font-size
在实际开发中，字体的取值有两种，一种是关键字，如 small、medium、large 等，另一种是像素值，如 px，em，rem，百分比等，在初始时，只学习 px 就可以，后期在做网页适配时再使用相对单位。
1、px 是什么
px，全称为 pixel（像素），一个像素指的是一张图片中最小的点，或者是计算机屏幕最小的点，严格来说，px 属于相对单位，因为屏幕分辨率不同，1px 的大小也是不同的，如果不考虑屏幕的分辨率，可以将 px 当成绝对单位来看待。
2、使用 px 为单位
有如下代码：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
font-size: 100px;
}
p{
font-size: 50px;
}
</style>
</head>
<body>
<div>Like_Frost</div>
<div>Like_Frost</div>
<p>Like_Frost</p>
</body>
</html>
在浏览器中显示如下：
三、字体粗细 font-weight
在 CSS 中，使用 font-weight 来定义字体的粗细，取值有两种，一种是关键字，另一种是 100-900 的数值，数值的大小代表文字的粗细。font-weight 的关键字取值如下：
| 属性值 | 说明 |
|---|---|
| normal | 正常（默认值），相当于 100 |
| lighter | 较细，相当于 400 |
| bold | 较粗，相当于 700 |
| bolder | 很粗，相当于 900 |
有如下示例：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
font-weight: 100;
}
p{
font-weight: 900;
}
</style>
</head>
<body>
<div>Like_Frost</div>
<p>Like_Frost</p>
</body>
</html>
在浏览器中显示为：
四、字体风格 font-style
在 CSS 中，我们常用 font-style 来定义斜体效果，属性值如下：
| 属性值 | 说明 |
|---|---|
| normal | 正常（默认值） |
| italic | 斜体 |
| oblique | 斜体 |
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
font-style: normal;
}
span{
font-style: oblique;
}
p{
font-style: italic;
}
</style>
</head>
<body>
<div>Like_Frost</div>
<span>Like_Frost</span>
<p>Like_Frost</p>
</body>
</html>
在浏览器中显示为：
可以发现，后两个斜体在浏览器中效果是一样的，但是并非所有字体都有 italic 属性，对于没有这个属性的字体，使用 oblique 来实现斜体效果。但在日常开发中很少用到 font-style 属性。
五、字体颜色 color
使用 color 来设置字体的颜色，其取值属性有两种，一种是关键字，一种是 16 进制 RGB 值，（还有 RGBA、HSL 等，在 CSS3 中提到）。
- 关键字是指颜色的英文名称，如 red、blue 等；
- RGB 值是指使用十六进制的数字来表示颜色的方式。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
color: aquamarine;
}
span{
color: #3499b8;
}
</style>
</head>
<body>
<div>Like_Frost</div>
<span>Like_Frost</span>
</body>
</html>
在浏览器中显示为：
六、CSS 注释
使用方式：/* */
