二 字体的设置
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 宋体;}