上一篇学习了CSS概念、CSS语法、添加CSS,下面接着学习CSS字体属性。
1.1字体font-family
在HTML中,设置文字的字体属性需要通过<font>标记中的face属性,而在css中则使用font-family属性。
语法:
font-family:"字体1","字体2",...
说明:
如果在font-family属性中定义了多种字体,在浏览器中浏览时会由前向后选择字体。即当浏览器不支持“字体1”时,则会采用“字体2”;如果不支持“字体1”和“字体2”,则采用“字体3”,依次类推。如果浏览器不支持font-family属性中定义的所有字体,则会采用系统默认的字体。举例:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>设置字体</title>
<style type="text/css">
<!--
.h{
font-family:"宋体";
}
-->
</style>
</head>
<body>
<span class="h">记得,每天给自己一个微笑 每天,当细碎的阳光透过玻璃窗洒满飘窗,当啁啾的鸟鸣像一首美妙的音乐淌过耳膜,告诉自己;新的一天开始了,记得,给自己一个微笑。
</span>
</body>
</html>
1.2 字号font-size
在HTML中,字体的大小是由<font>标记中的size属性来控制的。在CSS里可以使用font-size属性来自由控制字体的大小。
语法:
font-size:大小的取值
1.3 字体风格font-style
字体风格font-style属性用来设置字体是否为斜体。语法:
font-style:样式的取值
说明:
样式的取值有三种:normal是默认的正常字体;italic以斜体显示文字,oblique属于中间状态,以偏斜体显示。
1.4 加粗字体font-weight
在HTML里使用<b>标记设置文字为粗体显示,而在CSS中利用font-weight属性来设置字体的粗细。语法:
font-weight:字体粗细值
说明:
font-weight的取值范围包括normal,bold,bolder,lighter,number。
1.5 小写字母转为大写font-variant
使用font-variant属性可以将小写的英文字母转换为大写。语法:
font-variant:取值
说明:
在ffot-variant属性中,可以设置的值只有两个,一个是normal,表示正常像是,另一个是small-caps,它能将小写的英文字母转化为大写字母且自体较小。
1.6 字体复合属性
可以设置font的复合属性,用来简化CSS代码。语法:
font:字体取值
说明:
复合属性可以取值字体大小、字体风格、加粗字体等,各值之间用空格相连。
举例:
单个属性的写法,这里只列出最常用的3个字体属性。
.sample3 {
font-weight: bold;
font-size: 12px;
font-family: Verdana;
}
复合属性的写法font: normal normal normal medium normal "Times New Roman" ;