前面讲解了下网页中字体共分的五大类，现在我们来教大家，对字体作进一步的样式设置，包括字体的加粗、斜体等的样式设置，使得字体能更好得展现给用户，让用户有一个更好的理解。
工具/原料
1
windows记事本（任意一个版本即可）
2
Sublime(也是一 种记事本)
3
任意一个浏览器即可（这里使用Google Chrome浏览器）
方法/步骤
1
1.如图所示，我们新建一个记事本，并将记事本的名字改为“CSS字体样式设置二（26）.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-style属性设置，其值有normal：正常显示的意思，italic：文字斜体显示，以及oblique：文字倾斜显示）。</p></div><div class="listcon"><span>6</span><p>6.如图所示，我们再写一个p标签，然后里面写上style标签来包含我们设置的样式，这里我们对字体做一个斜体的设置（提示：由于浏览器不会对斜体和倾斜作区分，所以斜体和倾斜效果看起来一样）。</p></div><div class="listcon"><span>7</span><p>7.如图所示，我们再写一个p标签，然后里面写上style标签来包含我们设置的样式，这里我们对字体做一个倾斜的设置。</p></div><div class="listcon"><span>8</span><p>8.如图所示，我们写2个p标签，然后里面写上style标签来包含我们设置的样式，这里用属性font-weight的normal值和bold值，其一个是设置字体正常显示，一个使字体加粗，我们分别使用对第一个p标签的文字正常显示，第二个p标签的文字加粗显示。</p></div><div class="listcon"><span>9</span><p>9.如图所示，我们写3个p标签，然后里面写上style标签来包含我们设置的样式，这里用属性font-weight的100值、500值和900值，用来展示用不同值的加粗效果，当然虽然理论上font-weight属性的值为100-900，其值越大加粗效果越大，但是由于电脑中的字体只含有正常显示字体和加粗字体2个版本，所以我们也只能看到正常显示的字体和加粗显示的字体了，一般100-450为正常，而450-900为加粗效果。</p></div><div class="listcon"><span>10</span><p>10.如图所示，我们写2个p标签，然后里面写上style标签来包含我们设置的样式，这里用属性font-variant的normal值和small-caps值，其normal值就是让字体正常显示，而small-caps是让文字中的小写字母变成大写字母，但是其大小还是小写字母那么大（variant中文的意思是变体、变化，caps为大写字母的意思。）。</p></div><div class="listcon"><span>11</span><p>11.如图所示，我们写1个p标签，然后里面写上style标签来包含我们设置的样式，这里用属性font，由于font属性属于复合属性，所以在设置font属性时，我们在括号中的最后面一位需要写字体属性的值，而且必须写，最后面第二位写字体大小属性的值，而且必须写，剩下的属性的值没有顺序要求和数量要求。</p></div><div class="listcon"><span>12</span><p>12.如图所示，我们鼠标右击，在弹出的下拉列表菜单中，我们选择“在浏览器中打开”这一项。</p></div><div class="listcon"><span>13</span><p>13.如图所示，我们看到第一个用normal值正常显示的字体，第二个用italic值设置的斜体，第三个用oblique设置的倾斜，第四个正常显示用normal值，第五个用bold值加粗效果，第六个用100值加粗的效果，第七个用500值加粗的效果，第八个用900值加粗的效果，其900值看起来加粗了，就是说明电脑中没有9个加粗效果版本，只有2个而已，第9个用正常显示用normal值，第10个用small-caps值显示把小写字母显示为大写其大小仍然为小写字母大小一样，第11个正常显示用复合属性的设置方法，显示出来的字体。</p></div><div class="listcon"><span>14</span><p>14.如图所示，这是本案例的源代码，大家可以直接复制粘贴代码到一个空白的txt文件，并保存这个文件之后，修改这个txt的文件后缀名为html，然后直接点击打开这个html文件，就可以看到本大神为大家编写的这个网页了！<!-- 用<!DOCTYPE html>来声明这是一个html5的文档 --><!DOCTYPE html><!-- 用<html>标签来包含网页的主体 --><html><!-- 用head标签包含html的头部部分 --><head><!-- 用title标签来写入网页的标题 --><title>CSS字体样式设置二（26）
4.如图所示，我们写一个
标签用来包含html文档的头部部分，写上我是正常显示的文字样式
我是斜体显示的文字样式
我是倾斜显示的文字样式
我是正常显示的文字样式,用于演示font-weight属性
我是用来显示呢font-weight的加粗效果的
我是演示font-weight的值100加粗的效果
我是演示font-weight的值500加粗的效果
我是演示font-weight的值900加粗的效果
我是演示font-variant的normal正常显示的效果
我是演示font-variant的small-capes的效果，来个大写的A和小写的a做对比：Aa
我是演示font属性可以设置所有字体样式的效果AAaaa
注意事项
1
1.欢迎大家有问题时，向本大神进行提问哦！
2
2.没有软件的也可以找本大神。
3
3.教程不只是本篇，而是前端从入门到精通一个系列，欢迎浏览其他教程经验， 祝您早日成为前端大神。
上一篇：devc++怎么设置字体及大小
下一篇：墓地墓碑碑文通常都用哪种字体？