字体的设置

[设为首页] [加入收藏]

提示：站长书库上线了。站长招聘上人才沃

您当前的位置：首页 > 基础教程 > CSS >

下一篇：定义背景 上一篇：CSS基本语法

字体的设置

在css中使用font属性集对字体的风格，大小，亮度等进行设置，下面我们开始学习它们。

一字体风格 font-style

font-style属性用于字体显示的风格。

语法：{font-style:inherit|italic|normal|oblique}

说明：

(1)inherit　继承，表示该属性从父标签中继承而来。

(2)italic 　斜体，表示使用斜体显示文字。

(3)normal　正常，为默认值。

(4)oblique　偏斜体，表示有点倾斜但不大。

示例1 t1.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>字体类型</title> <style type="text/css"> </style> </head> <body> <h1>继承inherit</h1> <h2>斜体italic</h2> <h3>正常normal</h3> <p>偏斜体oblique</p> </body> </html>

二字体变化 font-variant

font-variant属性用于指定英文字体在打印时的大小对比。

语法：{font-variant:normal|small-caps|inherit}

说明：

(1)normal 表示打印时大写字母没变化。

(2)small-caps 表示打印时大写字母比通常小一点。

(3)inherit　表示该属性从父标签中继承而来。

示例2 t2.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>字体类型</title> <style type="text/css"> </style> </head> <body> <h1>Normal表示打印时大写字母没变化</h1> <h2>Small-caps 表示打印时大写字母比通常小一点</h2> <h3>Inherit表示该属性从父标签中继承而来</h3> </body> </html>

三字体亮度 font-weight

语法：{font-weight:100-900|bold|bolder|lighter|normal}

说明：浏览器默认的字体粗细为400。

(1)bold 表示黑体字(相当于数值700 )

(2)bolder 表示比黑体还要黑的字

(3)lighter 表示比黑体颜色要浅

(4)normal 正常体(相当于数值400)

(5)可以指定100-900之间的3位整数,100表示最亮,400表示正常

示例3 t3.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>字体类型</title> <style type="text/css"> </style> </head> <body> 未设置样式的字体：床前明月光，疑是地上霜。 <h1>继承inherit,比黑体颜色要浅lighter</h1> <h2>斜体italic,比黑体还要黑bolder</h2> <h3>正常体normal,黑体字bold</h3> <p>偏斜体oblique,最亮100</p> </body> </html>

四字体大小 font-size

font-size属性用来指定字体的相对或绝对大小。

语法：{ font-size:数值|large| larger| x-large|small|smaller| x-smal ...}

说明：字体大小使用数值设置也可以使用比例

(1)medium 标准字体大小

(2)small 比父字体小一号的字

(3)x-small 比small小1.2倍的字

(4)xx-small 比x-small小1.2倍的字

(5)large 比父字体大一号的字

(6)x-large 比large大1.2倍的字

(7)xx-large 比x-large大1.2倍的字

(8)整数＋"符号单位",符号单位有：象素px，点数pt，英寸in，毫米mm等

(9)整数+%,表示当前字体大小是父字体大小的百分比

示例4 t4.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>字体类型</title> <style type="text/css"> </style> </head> <body> 未设置样式的字体：床前明月光，疑是地上霜。 <h1>继承inherit,比黑体颜色要浅lighter</h1> <h2>斜体italic,比黑体还要黑bolder</h2> <h3>正常体normal,黑体字bold,大小20pt</h3> <p>偏斜体oblique,最亮100，标准大小medium</p> </body> </html>

五字型设置 font-family

字体类型

语法：{ font-family:"字体1","字体2","字体3"; }

说明：

(1) 当指定了字体类型时，浏览器将调用客户端字体

(2 )当指定了多种字体时，浏览器会安顺序进行搜索，如果没有搜索到，就使用默认字体。

示例5 t5.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>字体类型</title> <style type="text/css"> </style> </head> <body> 未设置样式的字体：床前明月光，疑是地上霜。 <h1> 继承inherit,比黑体颜色要浅lighter<br>font-family:"楷体_gb2312" </h1> <h2>斜体italic,比黑体还要黑bolder</h2> <h3>正常体normal,黑体字bold,大小20pt</h3> <p>偏斜体oblique,最亮100，标准大小medium</p> </body> </html>

六字体颜色 color

语法：{color: 数值}
作用：字体颜色
说明：颜色参数取值范围
·以RGB值表示如：#ff0000
·以默认颜色的英文名称表示如red

示例6 t6.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>字体颜色</title> <style type="text/css"> </style> </head> <body> <h1>字体颜色color </h1> </body> </html>

七复合属性设置 font

可以使用font参数对一个标签进行复合属性设置。

标签{font:italic 30pt 楷体_gb2312}

示例6 t7.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>字体类型</title> <style type="text/css"> </style> </head> <body> 未设置样式的字体：床前明月光，疑是地上霜。 <p>舉頭望明月，低頭思故鄉</p> </body> </html>

苏ICP备08101582号