1、字体font-family
在HTML中,设置文字的字体属性需要通过<font>
标记中的font
属性,而在CSS中则使用font-family
属性。
语法:
font-family: "字体","字体",…
说明:
如果在font-family
属性中定义了多种字体,在浏览器中浏览时会由前向后选择字体,即当浏览器不支持“字体1”时,则会采用“字体2”;如果不支持“字体1”和“字体2”,即采用“字体3”,以此类推。如果浏览器不支持font-family
属性定义中的所有字体,则会采用系统默认的字体。
举例
.h {
font-family: "宋体";
}
2、字号font-size
在HTML中,字体的大小是由<font>
标记中的size
属性来控制的。在CSS里可以使用font-size
属性来自由控制字体的大小。
语法:
font-size: 大小的取值
说明:
font-size的取值范围如下:
font-size: xx-small; /*绝对字体尺寸,最小*/
font-size: x-small; /*绝对字体尺寸,较小*/
font-size: small; /*绝对字体尺寸,小*/
font-size: medium; /*绝对字体尺寸,正常默认值*/
font-size: large; /*绝对字体尺寸,大*/
font-size: x-large; /*绝对字体尺寸,较大*/
font-size: xx0large; /*绝对字体尺寸,最大*/
font-size: larger; /*相对字体尺寸,相对于父对象中字体尺寸进行相对增大*/
font-size: smaller; /*相对字体尺寸, 相对于父对象中字体尺寸进行相对减小*/
font-size: 16px; /*绝对字体尺寸,使用像素值定义字体大小*/
举例:
.h {
font-family: "宋体";
font-size: "16px";
}
3、字体风格font-style
字体风格font-style
属性用来设置字体是否为斜体。
语法:
font-style: 样式的取值
说明:
样式的取值有3种:normal
是默认的正常字体;italic
以斜体显示文字;oblique
属于中间状态,以偏斜体显示。
举例:
.h {
font-family: "宋体";
font-size: 16px;
font-style: italic;
}
4、加粗字体font-weight
在HTML里使用<b>
标记设置文字为粗体显示,而在CSS种利用font-weight
属性来设置字体的粗细。
语法:
font-weight: 字体粗细值
说明:
font-weight的取值范围包括normal
、bold
、bolder
、lighter
、number
。其中normal
表示正常粗细;bold
表示粗体;lighter
表示特细体;number
不是真正的取值,其范围是100~900,一般情况下都是整百的数字,如200、300等。
举例:
.h {
font-family: "宋体";
font-size: 16px;
font-weight: bold;
}
5、小写字母转为大写font-variant
使用font-variant
属性可以将小写的英文字母转化为大写。
语法:
font-variant: 取值
说明:
在font-variant
属性种,可以设置的值只有两个,一个是normal
,表示正常显示,另一个是small-caps
,它能将小写的英文字母转化为大写字母且字体较小。
举例:
.h {
font-family: "宋体";
font-size: 16px;
font-variant: small-caps;
}
6、字体复合属性
可以设置font
的符合属性,用来简化CSS代码。
语法:
font: 字体的取值
说明:
复合属性可以取值字体族科、字体大小、字体风格、加粗字体等,各值之间用空格相连。
举例:
.h {font: bold italic "宋体"}
小结:CSS字体属性的不是很多,理解记忆起来还是比较容易的。而且现在的文本编辑器几乎都有
代码补全
的功能,只需要输出代码的前几个字母,编辑器就会自动为你补全剩下的代码,非常的方便。
所以这里的代码不需要死记硬背,而是应该更好的应用到日常的项目之中,多应用自然熟能生巧。学习任何一门技能,切忌系统全面,死记硬背。而是应该马上学以致用,用输出倒逼输入,遇到问题再去寻找答案。