css学习笔记（三）
二 字体的设置
1，设置字体
在HTML中设置字体使用的<font>标记的face属性，而在css中使用font-family属性来设置字体
基本语法：
font-family:字体1, 字体2, ....;
应用font-family属性可以一次定义多个字体，而在浏览器读取字体时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第一种字体，则自动读取第二种字体，若第二种字体也找不到，则自动读取第三种字体，这样一次类推，如果定义的所有字体都找不到，则选用计算机系统默认的字体
在定义英文字体时，若英文字体名是由多个单词组成，并且单词之间有空格，那么一定要将字体名用引号（单引号或双引号）引起来，如：font-family:"Courier New"，定义了一个字体为courier new
实例代码：
<html>
<head>
<title>在css中设置字体</title>
<style>
<!--
h2{font-family:黑体}
p{font-family:隶书,楷体,宋体}
-->
</style>
</head>
<body>
<center>
<h2>
用font-family属性设置字体
</h2>
</center>
<p>
字体按照隶书，楷体，宋体的顺序被浏览器读取
</p>
</body>
</html>
2，设置字号font-size
基本语法：
font-size:绝对尺寸|关键字|相对尺寸|百分比
绝对尺寸是指尺寸大小不会随着显示器分辨率的变化而变化，也不会随着显示器设备的不同而变化
使用绝对尺寸设置文字大小的时候一定要加上单位，如果没有加上单位，如果没有加上单位，浏览器会以px（像素）为单位，绝对尺寸可以使用单位包括in（英寸），px（像素），cm（厘米），mm（毫米），pt（点），pc（皮卡）。最常用的单位还是px（像素）
相对尺寸是指尺寸大小继承于该元素属性的前一个属性单位值，这里要强调的是，如果是在该元素的font-size属性中使用cm为属性单位，那么将直接继承于父元素的font-size属性，若没有父元素，则参考浏览器的默认字号值
绝对尺寸和相对尺寸也可以使用关键字来定义字号，绝对尺寸的关键字有七个，分别为xx-small（极小），x-small（较小），small（小），medium（标准大小），large（较大），x-large（较大），xx-large（极大）。相对尺寸则仅有两个关键字，分别为larger（较大），和smaller（较小）。相对尺寸的larger是指在它的上一个关键字基础上扩大一级，smaller则是在它上一个关键字基础上缩小一级
百分比是基于父元素中的字体大小为参考值的
如：
p{font-size:16pt}
b{font-size:200%}
这两行代码说明，所有<p>标记中用<b>标记定义的文字尺寸大小，是在<;p>标记中定义的文字大小的200%，即为32pt
实例代码：
<html>
<head>
<title>在css中设置字号</title>
<style>
<!--
.z1{font-size:0.3in}
.z2{font-size:30px}
.z3{font-size:0.5cm}
.z4{font-size:10mm}
-->
</style>
</head>
<body>
<center>s
<h2 class=z1>
使用绝对尺寸设置字号大小
</h2>
</center>
<hr>
<p class=z2>
这是30像素大小的文字
</p>
<p class=z3>
这是0.5厘米大小的文字
</p>
<p class=z4>
这是0.1厘米大小的文字
</p>
</body>
</html>
实例代码：
<html>
<head>
<title>在css中设置字号</title>
<style>
<!--
.z1{font-size:xx-small}
.z2{font-size:x-small}
.z3{font-size:smaller}
.z4{font-size:small}
.z5{font-size:medium}
.z6{font-size:large}
-->
</style>
</head>
<body>
<center>
<h1 class=z6>
使用关键字设置字号大小
</h1>
<p class=z1>
这是关键字xx-small的大小
</p>
<p class=z2>
这是关键字x-small的大小
</p>
<p class=z3>
这是关键字smaller的大小
</p>
<p class=z4>
这是关键字small的大小
</p>
<p class=z5>
这是关键字large的大小
</p>
</body>
</html>
3，设置字体样式font-style
字体样式就是设置字体是否为斜体，再HTML中可以用<i>标记设置字体为斜体，而在css中要用font-style属性来设置字体的斜体显示
基本语法：
font-style:normal|italic|oblique
| 属性的取值 | 说明 |
| normal | 正常显示（浏览器默认样式） |
| italic | 斜体显示文字 |
| oblique | 歪斜体显示（比斜体的倾斜角更大） |
实例代码：
<html>
<head>
<title>在css中设置字体样式</title>
<style>
<!--
.p1{font-style:normal}
.p2{font-style:italic}
.p3{font-style:oblique}
-->
</style>
</head>
<body>
<center>
<font size=4 color=red face=黑体>
使用font-style属性
</font>
</center>
<hr>
<p class=p1>
这是属性取值为normal的正常效果
</p>
<p class=p2>
这是属性取值为italic的正常效果
</p>
<p class=p3>
这是属性取值为oblique的正常效果
</p>
</body>
</html>
4，设置字体加粗font-weight
font-weight属性用来设置字体的加粗，在HTML中使用<b>标记来设置字体为粗体，但在css中是利用font-weight属性设置字体的粗体显示
基本语法：
font-weight:normal|bold|bolder|lighter|number
| 属性的取值 | 说明 |
| normal | 正常粗细（默认显示） |
| bold | 粗体（粗细约为数字700） |
| bolder | 加粗体 |
| lighter | 细体（比正常字体还细） |
| number | 数字一般都是整百，有九个级别（100-900），数字越大越粗 |
实例代码：
<html>
<head>
<title>在css中设置字体加粗</title>
<style type="text/css">
<!--
#b1{font-weight:normal}
#b2{font-weight:bold}
#b3{font-weight:bolder}
#b4{font-weight:lighter}
#b5{font-weight:100}
#b6{font-weight:400}
#b7{font-weight:700}
#b8{font-weight:900}
-->
</style>
</head>
<body>
<center>
<h3 id=b8>
使用font-weight设置字体加粗
</h3>
</center>
<hr>
<p id=b1>
font-weight属性取值为正常粗细
</p>
<p id=b2>
font-weight属性取值为粗体效果
</p>
<p id=b3>
font-weight属性取值为加粗体效果
</p>
<p id=b4>
font-weight属性取值为细体效果
</p>
<p id=b5>
font-weight属性取值为100的效果
</p>
<p id=b6>
font-weight属性取值为400的效果
</p>
<p id=b7>
font-weight属性取值为700的效果
</p>
</body>
</html>
5，设置字体变体font-variant
设置字体变体就是设置字体是否显示为小型的大写字母。而且css中的font-variant属性主要用于设置英文字体
基本语法：
font-variant:normal|small-caps
实例代码：
<html>
<head>
<title>在css中设置小型的大写字母</title>
<style type="text/css">
<!--
p{font-variant:small-caps}
-->
</style>
</head>
<body>
<center>
<h3>
使用font-variant属性设置字体变体
</h3>
</center>
<hr>
hello!you like css?...小写的英文字母<br>
<p>
hello!you like css?...小写的英文字母变为小型的大写英文字母
</p>
</body>
</html>
5，组合设置字体属性font
font属性是一种复合属性，可以同时对文字设置多个属性，包括字体斜体，字体大小，字体风格，字体加粗以及字体变体
基本语法：
font:font-family{font-size{font-style{font-weight{font-variant}}}}
font属性主要作用于不同的字属性的略写，特别是可以定义行高
属性与属性之间一定要用空格间隔开
例如：
P{font:italic bold small-caps 15pt 宋体;}