在网页中将所有的字体分为了5大类，这5大类分别为：衬线字体（serif）、非衬线字体（sans-serif）、等宽字体（monospace）、草书字体（cursive）和虚幻字体（fantasy）。分为这四大类的好处就是，可以让我们可以尽量将自己编写网页的最靠近的字体的效果呈现给用户，同样该字体分类，可以直接应用在font-family属性中，当做值来使用。
工具/原料
1
windows记事本（任意一个版本即可）
2
Sublime(也是一 种记事本)
3
任意一个浏览器即可（这里使用Google Chrome浏览器）
方法/步骤
1
1.如图所示，我们新建一个记事本，并将记事本的名字改为“网页中字体的分类（25）.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2
2.如图所示，我们在这个html文件的图标上右击，在弹出的下拉列表菜单中，我们依次选择“打开方式（H）”，之后选择“Sublime Text”这个编辑器程序，来编写我们的html文件。
3
3.如图所示，我们写一个标签用来声明这是一个html5的文档，在写一个,标签用来包含html文档的主主体部分。
4标签用来包含页的标题，再写一个<meta>标签来设置文字的编码方式为UTF-8，以次让浏览器更好的显示我们所编写的网页。</p></div><div class="listcon"><span>5</span><p>5.如图所示，我们写上<body>标签用来包含html的主体，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为serif，这就为我们这段文字选择该文字使用计算机的衬线字体来显示，只要是衬线字体就可以，衬线字体就是那种笔画上带有小勾的哪一种，比如：宋体就是衬线字体。</p></div><div class="listcon"><span>6</span><p>6.如图所示，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为sans-serif，这就为我们这段文字选择该文字使用计算机的非衬线字体来显示，只要是非衬线字体就可以，非衬线字体就是那种笔画上看起来非常平整的哪一种，比如：微软雅黑和黑体就是非衬线字体。</p></div><div class="listcon"><span>7</span><p>7.如图所示，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为monospace，这就为我们这段文字选择该文字使用计算机的等宽字体来显示，只要是等宽字体就可以，等宽字体就是每一个文字都是一样的宽度的文字，比如：我们在这个Sublime Text编辑器里面写的代码就是等宽字体，因此代码看起来都很整齐。</p></div><div class="listcon"><span>8</span><p>8.如图所示，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为cursive，这就为我们这段文字选择该文字使用计算机的草书字体来显示，只要是草书字体就可以，草书字体就是文字看起来很潦草的样子，看起来写的很快，给人一种速度的极致感受，比如：我们在看到的草书字体就是草书字体了。</p></div><div class="listcon"><span>9</span><p>9.如图所示，我们再写一个p标签，里面写上style属性，之后在里面设置这段文字的font-family属性值为fantasy，这就为我们这段文字选择该文字使用计算机的虚幻字体来显示，只要是虚幻字体就可以，虚幻字体就是文字看起来很有种飘飘然的感觉，感觉这个文字看着不是很充实，就像看虚线和实线的有不样的感觉。</p></div><div class="listcon"><span>10</span><p>10.如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。</p></div><div class="listcon"><span>11</span><p>11.如图所示，我们看到其四大类字体，已经展现在网页中了，我们可以根据自己想要的字体效果来选择使用，哪一种字体在自己开发的网页中使用，因为我们如果只选择自己设置的一种字体，比如：楷体，但是用户电脑中却没有这种字体，这时我们有没有提前设置这4类中的一种，那么字体将按照浏览器默认字体来显示，那可能显示的字体会非常糟糕。</p></div><div class="listcon"><span>12</span><p>12.如图所示，这是本案例的源代码，大家可以直接复制粘贴代码到一个空白的txt文件，并保存这个文件之后，修改这个txt的文件后缀名为html，然后直接点击打开这个html文件，就可以看到本大神为大家编写的这个网页了！<!-- 用<!DOCTYPE html>来声明这是一个html5的文档 --><!DOCTYPE html><!-- 用<html>标签来包含网页的主体 --><html><!-- 用head标签包含html的头部部分 --><head><!-- 用title标签来写入网页的标题 --><title>网页中字体的分类（25）
4.如图所示，我们写一个
标签用来包含html文档的头部部分，写上第一类为：衬线字体——serif
第二类为：非衬线字体——sans-serif
第三类为：等宽字体——monospace
第四类为：草书字体——cursive
第五类为：虚幻字体——fantasy
注意事项
1
1.欢迎大家有问题时，向本大神进行提问哦！
2
2.没有软件的也可以找本大神。
3
3.教程不只是本篇，而是前端从入门到精通一个系列，欢迎浏览其他教程经验， 祝您早日成为前端大神。
上一篇：韩国最潮街拍明星发型图片