📄 8.3.2.htm
字号:
<html>
<head>
<title>Untitled Document</title>
<LINK REL ="stylesheet" TYPE = "text/css" HREF = ".../contents.css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">字体与文本属性</h2>
<p>字体属性用于控制网页中文本的字符显示方式，文本属性用于控制网页中文本的段落布局。</p>
<p>
1. 字体属性<p>
字体属性用于控制网页中的文本显示样式，例如控制文字的大小、粗细以及使用的字体等。CSS 中的字体属性包括 font、font-family、font-size、font-style、font-variant
和 font-weight。<p>
font-family 属性用于确定要使用的字体列表，取值可以是字体名称，也可以是字体族名称，值之间用逗号分隔。在使用字体或字体族时，字体或字体族名称中间的空格应用破折号进行替换（例如，new
century schoolbook变为new-century-schoolbook），或对字体或字体族加上引号（例如"new century schoolbook"）。系统中安装的字体可以通过"控制面板"的"字体"工具来查看。第
1 级 CSS 定义了以下字体族名：cursive、fantasy、monospace、serif 和 sans-serif。字体族中通常包含多种字体，例如，serif
字体族中包含 Times 字体；monospace 字体族中包含 Courtier 字体等。<p>
font-size 属性用于控制字体的大小，它的取值分为四种类型：绝对大小、相对大小、长度值以及百分数。该属性的默认值是 medium。当使用绝对大小类型时，可能的取值为：xx-small
| x-small | small | medium | large |x-large |xx-large，表示越来越大的字体。当使用相对大小时，可能的取值为
smaller | larger，分别表示比上一级元素中的字体小一号和大一号。例如，如果在上级元素中使用了 medium 大小的字体，而子元素采用了 larger
值，则子元素的字体尺寸将是 large。当使用长度值时，可以直接指定。当使用百分比值时，表示与当前默认字体（即 medium 所代表字体的大小）的百分比。<p>
font-style 属性确定指定元素显示的字形。font-style 属性的值包括：normal、italic 和 oblique 三种。默认值为normal，表示普通字形；italic
和 oblique 表示斜体字形。<p>
font-variant 属性决定了浏览器显示指定元素的字体变体。该属性可以有两个值：small-caps 和 normal。默认值为normal，表示使用标准字体；small-caps
表示小体大写，也就是说，字体中所有小写字母看上去与大写字母一样，不过尺寸要比标准的大写字母要小一些。<p>
font-weight 属性定义了字体的粗细值，它的取值可以是以下值中的一个：normal | bold | bolder | lighter | 100
| 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900，默认值为 normal，表示正常粗细，bold 表示粗体。也可以使用数值，范围为100至900，对应从最细到最粗。Normal
相当于 400，bold 相当于 700。如果使用 bolder 或 lighter，则表示相对于上一级元素中的字体更粗或更细。<p>
使用 font 属性可一次性设置前面介绍的各种字体属性（属性之间以空格分隔）。在使用 font 属性设置字体格式时，各字体属性可以省略，但如果包括相应属性，必须以以下顺序出现：font-weight、font-variant、font-style、font-size、line-height（此属性的值可以位于
font 属性中，用于指定行高，它必须在 font-size 后用斜线隔开）和 font-family。
<p> 以下示例显示了各种常用字体属性的用法。
<p><a href="../src/tu8.3.htm" target="_blank">示例 </a>
<p>
2. 文本属性<p>
文本属性用于控制文本的段落格式，例如设置首行缩进、段落对齐方式等。CSS 中的常用文本属性包括：line-height、letter-spacing、text-align、text-decoration、text-indent、text-transform
和 vertical-align。<p>
letter-spacing 属性指定的值决定了字符间距（除去默认距离外）。它的取值可以是 normal 或具体的长度值，也可以是负值。默认值为 normal，表示浏览器根据最佳状态调整字符间距。也就是说，如果将
letter-spacing 设置为 0，它的效果并不与 normal 相同。<p>
line-height 属性决定了相邻行之间的间距（或者说行高）。其取值可以是数字、长度或百分比，默认值是 normal。当以数字指定值时，行高就是当前字体高度与该数字相乘的倍数。例如，DIV{font-size:10pt;
line-height:1.5} 表示的行高是 15pt。如果指定具体的长度值，则行高为该值。如果用百分比指定行高，则行高为当前字体高度与该百分比相乘。<p>
text-align 属性指定了所选元素的对齐方式，取值可以是：left | right | center | justify，分别表示左对齐、右对齐、居中对齐和两端对齐。此属性的默认值依浏览器的类型而定。使用此
CSS 属性指定对齐，类似于在 HTML 元素中使用 align 属性。<p>
text-decoration 属性可以对特定选项的文本进行修饰，它的取值为：none | [underline | overline | line-through
| blink]，默认值为 none，表示不加任何修饰。underline 表示添加下划线；overline 表示添加上划线；line-through 表示添加删除线；blink
表示添加闪烁效果。<p>
text-indent 属性可以对特定选项的文本进行首行缩进，取值可以是长度值或百分比。此属性的默认值是 0，表示无缩进。<p>
text-transform 属性用于转换文本，取值为：capitalize｜uppercase｜lowercase｜none，默认值是 none。capitalize值指示所选元素中文本的每个单词的首字母为大写；uppercase值指示所有的文本都为大写，lowercase值指示所有文本都以小写显示。<p>
vertical-align 属性定义了一个元素在垂直方向上的位置，该位置是相对于它上一级元素的位置而言的。该属性的取值为：baseline | sub |
super | top | text-top | middle | bottom | text-bottom | <percentage>，默认值是
baseline。其中的6个值（baseline、middle、sub、super、text-bottom和text-top）表示与修饰选项的父元素竖直对齐（baseline
表示将元素的基线与上一级元素的基线对齐，如果该元素没有基线，则取它的底端与上级元素的基线对齐；middle 表示将元素的垂直中点与上级元素的垂直中点对齐；sub
和 super 分别表示按元素下标或上标位置对齐； text-top 和 text-bottom 分别表示将元素的顶端或底端与上级元素的顶端或底端对齐），top
和 bottom 值分别表示与行的最高和最低元素竖直对齐，<percentage> 表示采用相对于该元素行高属性（line-height）的百分比。
<p> 以下示例将前面的字体属性示例进一步完善，把段落对齐格式用文本属性设置并增加了首行缩进效果。
<p><a href="../src/tu8.4.htm" target="_blank">示例</a></p>
<p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -