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>