我们经常需要控制HTML网页上的字体颜色、字体大小、字体粗细等，这些字体外观都是通过字体相关属性控制的。除此之外，文本的对齐方式、文本的换行风格等都是通过文本相关属性来控制的。
字体相关属性
CSS为控制文本的字体提供了大量属性，这些字体相关属性主要用于控制文本的字体、颜色、修饰等外观。字体相关属性如下。
➢ font：这是一个复合属性，其属性值是形如font-style font-variant font-weight font-size line-height font-family的复合属性值。使用font属性可同时控制文字的样式、字体粗体、字体大小、字体等属性，为了更具体地进行控制，通常不建议使用该属性。
➢ color：该属性用于控制文字颜色，该属性的值可以是任何有效的颜色值，包括字符串类型的颜色名、十六进制的颜色值，或使用rgb()函数设置的RGB值等，甚至包括CSS 3.0提供的HSL颜色值等。
➢ font-family：设置文字的字体，因为字体需要浏览器内嵌字体的支持，该属性可以设置多个显示字体，浏览器按该属性指定的多个字体依次搜索，以优先找到的字体来显示文字。多个属性值之间以英文逗号（,）隔开。
➢ font-size：该属性用于设置文字的字体大小，此处的字体大小既可以是相对的字体大小，也可以是绝对的字体大小。该属性支持如下属性值。
□ xx-small：绝对字体尺寸。最小字体。
□ x-small：绝对字体尺寸。较小字体。
□ smal：绝对字体尺寸。小字体。
□ medium：绝对字体尺寸。正常大小的字体。这是默认值。
□ large：绝对字体尺寸。大字体。
□ x-large：绝对字体尺寸。较大字体。
□ xx-large：绝对字体尺寸。最大字体。
□ larger：相对字体尺寸。相对于父组件中的字体进行相对增大。
□ smaller：相对字体尺寸。相对于父组件中的字体进行相对减少。
□ length：直接设置字体大小。该值既可设置为一个百分比值，意味着该字体大小是父组件中字体大小的百分比；也可设置为一个数值+长度单位，例如11pt、14px等。
➢ font-size-adjust：该属性用于控制对不同字体的字体尺寸进行微调。该属性可以指定为none（不进行任何调整）或用一个数值代表调整比例。
➢ font-stretch：该属性用于改变文字横向的拉伸，该属性的默认值为normal，即不拉伸。还有两个属性值，即narrower和wider，前者是横向压缩，后者是横向拉伸。
➢ font-style：该属性用于设置文字风格，是否采用斜体等。该属性的常用属性值有normal、italic、oblique，这些属性值依次表示设置文字正常、斜体、倾斜字体。
➢ font-weight：该属性用于设置字体是否加粗。该属性的值表示加粗的程度，加粗的程度用lighter、normal、bold、bolder等常用属性值表示，即更细、正常、加粗、更粗。还可以使用具体的数值，用100、200、300、…、900来控制字体的加粗程度。
➢ text-decoration：该属性用于控制文字是否有修饰线，如下画线等。该属性的值有none、blink、underline、line-through和overline，分别对应的修饰效果为无修饰、闪烁、下画线、中画线和上画线等。
➢ font-variant：该属性用于设置文字的大写字母的格式。该属性支持normal、small-caps两个属性值，分别对应于正常的字体、小型的大写字母字体。
➢ text-shadow：该属性用于设置文字是否有阴影效果。后面会有更详细的介绍。
➢ text-transform：该属性用于设置文字的大小写。该属性的值可以是none、capitalize、uppercase和lowercase，分别代表不转换、首字母大写、全部大写和全部小写。
➢ line-height：该属性用于设置字体的行高，即字体最底端与字体内部顶端之间的距离。为负值的行高可用来实现阴影效果。
➢ letter-spacing：该属性用于设置字符之间的间隔。该属性将指定的间隔添加到每个字符之后，但最后一个文字不会受该属性的影响。该属性支持normal和数值+长度单位（如11pt、14px等）两种属性值。
➢ word-spacing：该属性用于设置单词之间的间隔。该属性支持normal和数值+长度单位（如11pt、14px等）两种属性值。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 字体相关属性设置 </title>
</head>
<body>
color:#888888：
<span style="color:#888888">测试文字</span><br />
color:red：
<span style="color:red">测试文字</span><br />
font-family:楷体_GB2312：
<span style="font-family: '楷体_GB2312'">测试文字</span><br />
font-size:20pt：
<span style="font-size:20pt">测试文字</span><br />
font-size:xx-large：
<span style="font-size:xx-large">测试文字</span><br />
font-stretch:narrower：
<span style="font-stretch:narrower">测试文字</span><br />
font-stretch:wider ：
<span style="font-stretch:wider">测试文字</span><br />
font-style:italic：
<span style="font-style:italic">测试文字</span><br />
font-weight:bold：
<span style="font-weight:bold">测试文字</span><br />
font-weight:900：
<span style="font-weight:900">测试文字</span><br />
text-decoration:blink：
<span style="text-decoration: blink;">测试文字</span><br />
text-decoration:underline：
<span style="text-decoration:underline">测试文字</span><br />
text-decoration:line-through：
<span style="text-decoration:line-through">测试文字</span><br />
font-variant:small-caps ：
<span style="font-variant:small-caps">hello</span><br />
text-transform:uppercase：
<span style="text-transform:uppercase">hello</span><br />
text-transform:capitalize：
<span style="text-transform:capitalize">hello</span><br />
line-height:30pt：
<span style="line-height:30pt">测试文字</span><br />
letter-spacing:5pt：
<span style="letter-spacing:5pt">hello world</span><br />
letter-spacing:15pt：
<span style="letter-spacing:15pt">hello world</span><br />
word-spacing:20pt：
<span style="word-spacing:20pt">hello world</span><br />
word-spacing:60pt：
<span style="word-spacing:60pt">hello world</span><br />
</body>
</html>
添加阴影
字体相关属性中提供了一个text-shadow属性，该属性在CSS 2.0中被引入，CSS 2.1删除了该属性，CSS 3.0再次引入了该属性。该属性的值形如color xoffset yoffset length，或xoffset yoffset radius color。
➢ color：指定该阴影的颜色，如果省略指定阴影颜色，在Firefox、Opera中将直接使用字体颜色作为引用颜色，在Internet Explorer和Chrome中将不会显示阴影。
➢ xoffset：指定阴影在横向上的偏移。
➢ yoffset：指定阴影在纵向上的偏移。
➢ radius：指定阴影的模糊半径。模糊半径越大，阴影看上去越模糊。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 阴影 </title>
<style type="text/css">
span{
display: block;
padding: 8px;
font-size:xx-large;
}
</style>
</head>
<body>
text-shadow:red 5px 5px 2px：
<span style="text-shadow:red 5px 5px 2px">测试文字</span>
text-shadow:5px 5px 2px（省略阴影颜色）：
<span style="text-shadow:5px 5px 2px;color:blue;">测试文字</span>
text-shadow:-5px -5px 2px gray（向左上角投影）：
<span style="text-shadow:-5px -5px 2px gray">测试文字</span>
text-shadow:-5px 5px 2px gray（向左下角投影）：
<span style="text-shadow:-5px 5px 2px gray">测试文字</span>
text-shadow:5px -5px 2px gray（向右上角投影）：
<span style="text-shadow:5px -5px 2px gray">测试文字</span>
text-shadow:5px 5px 2px gray（向右下角投影）：
<span style="text-shadow:5px 5px 2px gray">测试文字</span>
text-shadow:15px 15px 2px gray（向右下角投影、更大偏移距）：
<span style="text-shadow:15px 15px 2px gray">测试文字</span>
text-shadow:5px 5px 10px gray（模糊半径增加，模糊程度加深）：
<span style="text-shadow:5px 5px 10px gray">测试文字</span>
</body>
</html>
添加多个阴影
如果希望为文字添加多个阴影，则可以为text-shadow属性多设置几组阴影，多组阴影之间使用逗号隔开。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 阴影 </title>
<style type="text/css">
span{
display: block;
padding: 8px;
font-size:xx-large;
}
</style>
</head>
<body>
text-shadow:5px 5px 2px #222,<br/>
30px 30px 2px #555 ,<br/>
50px 50px 2px #888（多个投影）：
<span style="text-shadow:5px 5px 2px #222,30px 30px 2px #555
,50px 50px 2px #888">测试文字</span>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。