css字体属性

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

1. 字体 font-family

在HTML中，设置文字的字体属性需要通过&ltfont标记中的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&lthead&ltmeta http-equiv=content-type content=text/html charset=gb2312 /&lttitle设置字体&lt/title&ltstyle type=text/css&lt!--.h {    font-family: 宋体}--&lt/style&lt/head&ltbody&ltspan class=h床前明月光，疑是地上霜。举头望明月，低头思故乡。&lt/span&lt/body&lt/html

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

2. 字号 font-size

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

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

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

实例：

&lthtml xmlns=http://www.w3.org/1999/xhtml&lthead&ltmeta http-equiv=content-type content=text/html charset=gb2312 /&lttitle设置字号&lt/title&ltstyle type=text/css&lt!--.h3 {    font-family: 宋体    font-size: 24px}.h2 {    font-family: 宋体    font-size: 20px}.h1 {    font-family: 宋体    font-size: 16px}--&lt/style&lt/head&ltbody&ltp class=h1人人那个都说沂蒙山好。&lt/p&ltp class=h2人人那个都说沂蒙山好。&lt/p&ltp class=h3人人那个都说沂蒙山好。&lt/p&lt/body&lt/html

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

3. 字体风格 font-style

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

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

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

normal是默认正常的字体

italic以斜体显示文字

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

实例：

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

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

4. 加粗字体 font-weight

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

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

说明：font-weight的取值范围包括：normalboldbolderlighternumber。其中

normal表示正常粗细

bold表示粗体

bolder表示特粗体

lighter表示特细体

number不是真正的取值，其范围是100～900，一般情况下都是整百的数字，如200300等。

实例：

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

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