【技术等级】初级

【承接文章】《强大的CSS选择器，CSS的核心技术，前端小白必备功底》

本文重点讲解CSS技术中有关字体样式的属性以及这些属性的取值。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

从本文开始，小海老师将带领大家认识CSS技术中的所有属性。我把CSS技术中的各个属性进行了分类，首先我们从与字体样式有关的属性开始。

CSS中与字体有关的属性包括以下六个：

• font-family

• font-size

• font-weight

• font-style

• font-variant

• color

一、字体样式属性：

CSS利用font-family属性来设置字体或字体列表。

1、设置字体：

.sty01{font-family:黑体;}

上述代码定义了用户自定义类sty01，该样式设置字体为“黑体”。利用class属性取值为sty01样式的HTML标记对中的文字将以“黑体”的字体显示。

2、设置字体列表：

.sty02{font-family:汉仪综艺体简,微软雅黑,黑体;}

上述代码定义了用户自定义类sty02，该样式设置了一个字体列表。利用class属性取值为sty02样式的HTML标记对中的文字，首先以“汉仪综艺体简”的字体显示，目标浏览器所在的设备若没有安装该字体，则自动以“微软雅黑”的字体显示；目标浏览器所在的设备若也没有安装“微软雅黑”字体，则自动以“黑体”的字体显示。

注意：为了防止CSS文件的中文字体名称不符合字符集的要求，所以习惯上都是用中文字体的外文名称来书写font-family属性的取值，下面我就为大家罗列几个常用的字体名称。

• 设置字体为 微软雅黑：.style1{font-family:Microsoft YaHei;}

• 设置字体为 宋体：.style2{font-family:SimSun;}

• 设置字体为 幼圆：.style3{font-family:YouYuan;}

• 设置字体为 黑体：.style4{font-family:SimHei;}

• 设置字体为 楷体：.style5{font-family:KaiTi;}

更多中文字体的西文名称，小海老师会在后续的文章中详细罗列。

二、字号大小属性：

CSS利用font-size属性来设置文本的字号效果

1、绝对大小：

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

上述取值中：medium为默认值，medium以上的取值越来越小，medium以下的取值越来越大。

2、相对大小：

• smaller，比上一级元素的字体大小小一号。

• larger，比上一级元素的字体大小大一号。

代码实例：

<div style=“font-size:14px;”>

<span style=“font-size:larger;”>段落文字内容</span>

</div>

上述代码中“段落文字内容”的字体大小显示为比14px字号大一号的外观。

3、带有单位的长度值：

代码实例：.s1{font-size:16px;}

上述代码定义了用户自定义类s1，该样式设置字号为16px大小。

4、百分比：

设置字体字号为上一级元素的百分比大小。

代码实例：.s2{font-size:10%;}

上述代码定义了用户自定义类s2，该样式设置字号是上一级元素的字体大小的20%。

三、字体粗细属性

CSS利用font-weight属性来设置文本的粗细效果

• normal，普通粗细，粗细度约为400。

• bold，粗体，粗细度约为700。

• bolder，更粗体，粗细度约为900。

• lighter，更细体，粗细度约为500。

• 100、200、300、400、500、600、700、800、900：9个粗细等级。

但是现在的浏览器都无法将字体的粗细渲染的如此细腻，也就是说这9个等级的粗细度并没有明显的差异。

四、字体斜体属性

CSS利用font-style属性来设置文本的斜体效果

• normal，普通，字体显示为不斜体。

• italic，斜体，设置字体为斜体。

• oblique，倾斜体，当特殊字体没有斜体效果时，可以使用该取值将字体倾斜。

五、设置字体是否为小型大写字母

CSS技术利用font-variant属性来设置是否为小型大写字母

• normal，普通，字体显示为正常。

• small-caps，小型大写字母。

六、设置字体的颜色

CSS技术利用color属性来设置文本颜色

• 十六进制颜色代码。
  

实例：h1{color:#ff0000;}

含义：重定义HTML中的h1标记对为红色。

• 十进制颜色代码。

实例：h2{color:rgb(0,255,0);}

含义：重定义HTML中的h2标记对为绿色。

• 颜色英文单词。

实例：h3{color:blue;}

含义：重定义HTML中的h3标记对为蓝色。

文章预告

下一次小海老师会为大家讲解CSS中有关文本段落的属性，结合前面HTML的内容，可以对页面中的段落进行更为细致的调整。千万不要错过哦。

小海声明

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。