网页中字体的分类（25）
1、1.如图所示，我们新建一个记事本，并将记事本的名字改为“网页中字体的分类（25）.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2、2.如图所示，我们在这个html文件的图标上右击，在弹出的下拉列表菜单中，我们依次选择“打开方式（H）”，之后选择“Sublime Text”这个编辑器程序，来编写我们的html文件。
3、3.如图所示，我们写一个<!DOCTYPE html>标签用来声明这是一个html5的文档，在写一个,<html>标签用来包含html文档的主主体部分。
4、4.如图所示，我们写一个<head>标签用来包含html文档的头部部分，
写上<title>标签用来包含页的标题，再写一个<meta>标签来设置文字的编码方式为UTF-8，以次让浏览器更好的显示我们所编写的网页。
5、5.如图所示，我们写上<body>标签用来包含html的主体，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为serif，这就为我们这段文字选择该文字使用计算机的衬线字体来显示，只要是衬线字体就可以，衬线字体就是那种笔画上带有小勾的哪一种，比如：宋体就是衬线字体。
6、6.如图所示，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为sans-serif，这就为我们这段文字选择该文字使用计算机的非衬线字体来显示，只要是非衬线字体就可以，非衬线字体就是那种笔画上看起来非常平整的哪一种，比如：微软雅黑和黑体就是非衬线字体。
7、7.如图所示，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为monospace，这就为我们这段文字选择该文字使用计算机的等宽字体来显示，只要是等宽字体就可以，等宽字体就是每一个文字都是一样的宽度的文字，比如：我们在这个Sublime Text编辑器里面写的代码就是等宽字体，因此代码看起来都很整齐。
8、8.如图所示，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为cursive，这就为我们这段文字选择该文字使用计算机的草书字体来显示，只要是草书字体就可以，草书字体就是文字看起来很潦草的样子，看起来写的很快，给人一种速度的极致感受，比如：我们在看到的草书字体就是草书字体了。
9、9.如图所示，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为fantasy，这就为我们这段文字选择该文字使用计算机的虚幻字体来显示，只要是虚幻字体就可以，虚幻字体就是文字看起来很有种飘飘然的感觉，感觉这个文字看着不是很充实，就像看虚线和实线的有不样的感觉。
10、10.如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。
11、11.如图所示，我们看到其四大类字体，已经展现在网页中了，我们可以根据自己想要的字体效果来选择使用，哪一种字体在自己开发的网页中使用，因为我们如果只选择自己设置的一种字体，比如：楷体，但是用户电脑中却没有这种字体，这时我们有没有提前设置这4类中的一种，那么字体将按照浏览器默认字体来显示，那可能显示的字体会非常糟糕。
12、12.如图所示，这是本案例的源代码，大家可以直接复制粘贴代码到一个空白的
txt文件，并保存这个文件之后，修改这个txt的文件后缀名为html，然后直接点击打开这个html文件，就可以看到本大神为大家编写的这个网页了！
<!-- 用<!DOCTYPE html>来声明这是一个html5的文档 -->
<!DOCTYPE html>
<!-- 用<html>标签来包含网页的主体 -->
<html>
<!-- 用head标签包含html的头部部分 -->
<head>
<!-- 用title标签来写入网页的标题 -->
<title>网页中字体的分类（25）</title>
<!-- 用meta标签来设置文档的编码格式，以便浏览器能够正确解读网页 -->
<meta charset="utf-8">
</head>
<!-- 用body标签包含html文档的主体部分 -->
<body>
<!-- 网页中的字体分为5类：
第一类为：衬线字体——serif -->
<p style="font-family: serif">第一类为：衬线字体——serif
<!-- 第二类为：非衬线字体——sans-serif -->
<p style="font-family: sans-serif">第二类为：非衬线字体——sans-serif
<!-- 第三类为：等宽字体——monospace -->
<p style="font-family: monospace;">第三类为：等宽字体——monospace
<!-- 第四类为：草书字体——cursive -->
<p style="font-family: cursive">第四类为：草书字体——cursive
<!-- 第五类为：虚幻字体——fantasy -->
<p style="font-family: fantasy">第五类为：虚幻字体——fantasy
</body>
</html>