1. 文本与字体区别
上一篇我们学习了设置文本的样式，包括颜色、对齐方式、装饰线，这些实际上都是针对整个文本内容来说的。
而字体这块，则是针对一个个的文字了，主要是设置文字的字体类型、字体风格、字体粗细、字体大小。
2. 字体类型
什么是字体类型呢，就是我们常说的宋体、黑体、楷体、微软雅黑等类型区分，在使用WORD编写文档时经常会遇到，如下图：
在网页中，我们同样可以指定字体，通过font-family样式名来指定即可。windows系统常见的内置字体有：
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
仿宋 FangSong
楷体 KaiTi
1
2
3
4
5
我们尝试修改字体，代码如下：
<div>
<!-- 宋体 -->
<p style="font-family: SimSun;">
加入生活欺骗了你
</p>
<!-- 黑体 -->
<p style="font-family: SimHei;">
相信吧，那快乐的日子即将来临
</p>
<!-- 微软雅黑 -->
<p style="font-family: Microsoft YaHei;">
不要悲伤，不要心急
</p>
<!-- 楷体 -->
<p style="font-family: KaiTi;">
犹豫的日子里需要寂静
</p>
</div>
对应效果如下，可见不同字体的样式差别还是比较大的。
3. 字体风格
什么是字体风格呢，其实就是font-style样式。
font-style常用取值有normal、italic两种，其实就是正常字体、斜体两种风格，代码如下：
<div>
<p style="font-style: normal;">
加入生活欺骗了你
</p>
<p style="font-style: italic;">
相信吧，那快乐的日子即将来临
</p>
<p>
不要悲伤，不要心急
</p>
<p>
犹豫的日子里需要寂静
</p>
</div>
效果如下，斜体有时候会用来突出显示某部分文字。
4. 字体粗细
这个比较好理解，就是字体的笔画的粗细程度，用font-weight描述，代码：
<p style="font-weight:lighter;">
犹豫的日子里需要寂静
</p>
<p style="font-weight:normal;">
加入生活欺骗了你
</p>
<p style="font-weight:bold;">
相信吧，那快乐的日子即将来临
</p>
<p style="font-weight:bolder;">
不要悲伤，不要心急
</p>
其中，lighter表示比正常字体细一点，normal表示正常字体，bold表示粗体，bolder表示比粗体更粗一点，效果如下：
哈哈，是不是发现效果并不算明显，所以实际使用过程中，font-weight用的也不多。
5. 字体大小
字体大小这个就用的非常多了，字体大小使用font-size描述，而且有好几种描述单位。
5.1 使用像素单位
像素单位是px，默认是16px，我们可以在此基础上调大或者调下字体。例如：
<div>
<p style="font-size:12px;">
这里是12px字体
</p>
<p style="font-size:16px;">
这里是16px字体
</p>
<p style="font-size:20px;">
这里是20px字体
</p>
<p style="font-size:24px;">
这里是24px字体
</p>
</div>
效果如下：
5.2 使用em单位
em是相对单位， 也就是说1em就是16px大小。那么0.5em就是8px了，2em就是32px大小了，依次类推。代码：
<div>
<p style="font-size:0.5em;">
这里是0.5em字体
</p>
<p style="font-size:1em;">
这里是1em字体
</p>
<p style="font-size:1.5em;">
这里是1.5em字体
</p>
<p style="font-size:2.0em;">
这里是2em字体
</p>
</div>
效果如下：
5.3 其他单位
还可以使用%号作为单位，这种用法比较少，此处不再讲解。
6. 小结
CSS用法比较多，但是大家也无需死记硬背，只要掌握了有哪些样式，脑子中有印象，而且编写过例子实践过。
以后真正写网页用到的时候，参考下之前的例子，或者从网上搜一下，就能写出相应的效果了。
