CSS为控制文本的字体提供了大量属性，这些字体相关属性主要用于控制文本的字体、颜色、修饰等外观。
- font ：是一个复合属性，其属性值是形如font-style,font-variant,font-weight,font-size的复合属性值。可同时控制文字样式、字体粗细、字体大小等属性。为了更具体的控制，通常不建议使用该属性。
- color ：用于控制文字颜色。该属性的值可以是任何有效颜色值。包括颜色名、十六进制颜色值、或用rgb()函数设置的RGB值等。
- font-family ：设置文字字体。可有多个属性值，以适应不同浏览器。
- font-size ：用于设置文字字体大小。既可以是相对字体大小，也可以是绝对字体大小。该属性支持如下属性值：
- xx-small：绝对字体尺寸。最小字体。
- x-small：绝对字体尺寸。较小字体。
- small：绝对字体尺寸。小字体。
- medium：绝对字体尺寸。正常大小字体，默认值。
- large：绝对字体尺寸。大字体。
- x-large：绝对字体尺寸。较大字体。
- xx-large：绝对字体尺寸。最大字体。
- large：相对字体尺寸。相对父元素中的字体进行相对增大。
- smaller：相对字体尺寸。相对父元素中的字体进行相对减少。
- length：直接设置字体大小。该值既可以是百分比值，也可以是数值+长度单位。 - font-size-adjust ：用于控制对不同字体的字体尺寸进行微调。该值可以为none，或数值。
- font-stretch ：用于改变文字横向的拉伸。默认值为normal即不拉伸，还有narrower横向压缩、wider横向拉伸。
- font-style：用于设置文字风格，是否使用斜体等。常用值有normal、italic、oblique，依次为文字正常、斜体、倾斜字体。
- font-weight：用于设置字体是否加粗。
- text-decoration：用于控制文字是否有修饰线。该属性的值有none、underline、line-through、overline等，对应无修饰、下划线、中划线、上划线等。
- font-variant ：用于设置文字大写字母格式
- text-shadow：用于设置文字是否有阴影效果。
- text-transform ：用于设置文字大小写。
- line-height：用于设置字体行高。
- letter-spacing：用于设置字符间的间隔。
- word-spacing：用于设置单词间的间隔。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>字体相关属性</title>
</head>
<body>
<span style="font-size:xx-large">测试文字1</span><br/>
<span style="font-stretch:narrower">测试文字2</span><br/>
<span style="font-stretch:wider">测试文字3</span><br/>
<span style="font-style:italic">测试文字4</span><br/>
<span style="font-weight:bold">测试文字5</span><br/>
<span style="font-weight:900">测试文字6</span><br/>
<span style="text-decoration:blink;">测试文字7</span><br/>
<span style="text-decoration:underline">测试文字8</span><br/>
<span style="text-decoration:line-through">测试文字9</span><br/>
<span style="font-variant:small-caps">hello10</span><br/>
<span style="text-transform:uppercase">测试文字11</span><br/>
<span style="text-transform:capitalize">测试文字12</span><br/>
<span style="line-height:30pt">测试文字13</span><br/>
<span style="letter-spacing:5pt">测试文字14</span><br/>
<span style="letter-spacing:15pt">测试文字15</span><br/>
<span style="word-spacing:20pt">测试文字16</span><br/>
<span style="word-spacing:60pt">测试文字17</span><br/>
</body>
</html>
75
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
