css字体属性

2021-05-20 21:58:03发布

下面将以CSS的样式定义方法来介绍文字的使用。使用CSS定义的文字样式更加丰富,实用性更强。


1. 字体 font-family

在HTML中,设置文字的字体属性需要通过<font>标记中的face属性,而在CSS中,则使用font-family属性。

font-family: "字体1","字体2",…


如果在font-family属性中定义了多种字体,在浏览器中浏览时会由前向后选择字体。即当浏览器不支持“字体1”时,则会采用“字体2”;如果不支持“字体1”和“字体2”,则采用“字体3”,依次类推。如果浏览器不支持font-family属性中定义的所有字体,则会采用系统默认的字体。

html xmlns="http://www.w3.org/1999/xhtml">
<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>

此段代码中首先在<head></head>之间,用<style>定义了h标记中的字体font-family为【宋体】,在浏览器中浏览可以看到段落中的文字以【宋体】显示,

 

2. 字号 font-size

在HTML中,文字的大小是由<font>标记中的size 属性来控制的。在CSS里可以使用font-size属性来自由控制字体的大小。


语法:font-size:大小的取值



font-size的取值范围如下
css字体取值 说明
xx-small 绝对字体尺寸,最小
x-small 绝对字体尺寸,较小
medium 绝对字体尺寸,正常默认值
large 绝对字体尺寸,大
x-large 绝对字体尺寸,较大。
xx-large 绝对字体尺寸,最大。
larger 相对字体尺寸,相对于父对象中字体尺寸进行相对增大
smaller 相对字体尺寸,相对于父对象中字体尺寸进行相对减小
length 可采用百分数或长度值,不可为负值,其百分比取值是基于父对象中字体的尺寸



实例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>设置字号</title>
<style type="text/css">
<!--
.h3 {
    font-family: "宋体";
    font-size: 24px;
}
.h2 {
    font-family: "宋体";
    font-size: 20px;
}
.h1 {
    font-family: "宋体";
    font-size: 16px;
}
-->
</style>
</head>
<body>
<p class="h1">人人那个都说沂蒙山好。</p>
<p class="h2">人人那个都说沂蒙山好。</p>
<p class="h3">人人那个都说沂蒙山好。</p>
</body>
</html>


此段代码中首先在<head></head>之间,用样式定义了不同的字号font-size,然后在正文中对文本应用样式,在浏览器中浏览效果


3. 字体风格 font-style

字体风格font-style属性用来设置字体是否为斜体。

语法:font-style:样式的取值


说明:样式的取值有3种:

normal是默认正常的字体;

italic以斜体显示文字;

oblique属于中间状态,以偏斜体显示。


实例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
.h {
    font-family: "宋体";
    font-size: 12px;
    font-style: italic;
}
-->
</style>
</head>
<body>
<span class="h">&ldquo;时尚化的理念;个性化的创造;人性化的服务;高性价比的价格&rdquo;是水晶给予您的最大承诺。&ldquo;客户至上,服务至上,品牌至上&rdquo;是喜洋洋婚庆公司给予您的诚信保证。 </span>
</body>
</html>


此段代码中首先在<head></head>之间,用<style>定义了 h 标记中的字体风格font-style为斜体,然后在正文中对文本应用h样式,在浏览器中浏览效果。。


4. 加粗字体 font-weight

在HTML里使用<b>标记设置文字为粗体显示,而在CSS中利用font-weight属性来设置字体的粗细。


语法:font-weight:字体粗度值


说明:font-weight的取值范围包括:normal、bold、bolder、lighter、number。其中


normal表示正常粗细;

bold表示粗体;

bolder表示特粗体;

lighter表示特细体;

number不是真正的取值,其范围是100~900,一般情况下都是整百的数字,如200、300等。


实例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>设置加粗字体</title>
<style type="text/css">
<!--
.h {
    font-family: "宋体";
    font-size: 14px;
    font-weight: bold;
}
-->
</style>
</head>
<body>
<span class="h">产品涉及充电手电筒,非充电手电筒,手提式探照灯 ,应急照明灯,台灯,头灯等系列。特别是手电筒,探照灯 ,应急灯等,产销两旺受客户及用户广泛好评。 </span>
</body>
</html>


此段代码中首先在<head></head>之间,用<style>定义了h标记中的加粗字体font-weight为粗体bold,然后在正文中对文本应用h样式,在浏览器中浏览效果,可以看到正文字体加粗了。

TAG标签:

登录 后发表评论
0条评论
还没有人评论过~