CSS文本属性用于控制网页中文本的显示样式，涵盖字体设置、排版布局、装饰效果等多个维度，是前端样式开发中最常用的属性类别之一。不同的文本属性对应不同的文本调整需求，合理搭配使用可以实现丰富的文本展示效果。
一、字体相关文本属性
字体相关属性主要用于设置文本的字体系列、大小、粗细、样式等基础字体特征，是最基础的文本属性类别。
1. font-family
该属性用于设置文本的字体系列，取值可以是具体的字体名称，也可以是通用字体系列。如果设置多个字体，浏览器会按顺序优先使用前面的字体，前面的字体不可用时才会使用后面的字体。
/* 设置多个字体，优先使用微软雅黑，不可用则用宋体，最后使用通用无衬线字体 */
.text {
font-family: "Microsoft YaHei", "SimSun", sans-serif;
}
2. font-size
该属性用于设置文本的字体大小，常用取值包括绝对单位如px，相对单位如em、rem，也可以使用百分比。
.text-small {
font-size: 12px; /* 绝对单位，固定大小 */
}
.text-large {
font-size: 1.5rem; /* 相对单位，相对于根元素的字体大小 */
}
3. font-weight
该属性用于设置文本的粗细程度，取值可以是关键词如normal、bold，也可以是100到900的数值，数值越大字体越粗。
.normal-text {
font-weight: normal; /* 正常粗细，等同于400 */
}
.bold-text {
font-weight: bold; /* 加粗，等同于700 */
}
4. font-style
该属性用于设置文本的样式，最常用的是设置文本为斜体，默认值为normal表示正常样式。
.italic-text {
font-style: italic; /* 斜体样式 */
}
.normal-text {
font-style: normal; /* 正常样式，覆盖继承的斜体 */
}
二、文本排版相关属性
排版相关属性主要用于调整文本的对齐方式、行高、间距、缩进等排版相关的效果，影响文本的整体布局。
1. text-align
该属性用于设置文本的水平对齐方式，取值包括left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。
.left-align {
text-align: left; /* 左对齐，默认值 */
}
.center-align {
text-align: center; /* 居中对齐 */
}
.justify-align {
text-align: justify; /* 两端对齐，最后一行除外 */
}
2. line-height
该属性用于设置文本的行高，即一行文本基线到下一行文本基线的距离，取值可以是数字、长度单位或百分比。使用数字时，行高是当前字体大小乘以该数字。
.text {
font-size: 16px;
line-height: 1.5; /* 行高为16*1.5=24px */
}
.text2 {
line-height: 24px; /* 直接使用固定行高 */
}
3. letter-spacing与word-spacing
letter-spacing用于设置字符之间的间距，word-spacing用于设置单词之间的间距，取值可以是长度单位，正值为增加间距，负值为减少间距。
.wide-letter {
letter-spacing: 2px; /* 字符间距增加2px */
}
.wide-word {
word-spacing: 4px; /* 单词间距增加4px */
}
4. text-indent
该属性用于设置文本块首行的缩进，常用取值为长度单位，一般用于段落首行缩进2个字符的效果。
.paragraph {
text-indent: 2em; /* 首行缩进2个字符宽度 */
}
三、文本装饰与效果属性
这类属性用于给文本添加装饰效果，或者调整文本的外观表现，比如下划线、阴影、大小写转换等。
1. text-decoration
该属性是简写属性，用于设置文本的装饰线，包括下划线、上划线、删除线等，也可以设置装饰线的样式、颜色。
.underline {
text-decoration: underline; /* 下划线 */
}
.line-through {
text-decoration: line-through; /* 删除线 */
}
.no-underline {
text-decoration: none; /* 无装饰线，常用于去除链接默认下划线 */
}
2. text-shadow
该属性用于给文本添加阴影效果，取值依次为水平偏移、垂直偏移、模糊半径、阴影颜色。
.shadow-text {
/* 水平偏移2px，垂直偏移2px，模糊半径4px，黑色半透明阴影 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
3. text-transform
该属性用于设置文本的大小写转换，取值包括uppercase（全大写）、lowercase（全小写）、capitalize（每个单词首字母大写）。
.upper {
text-transform: uppercase; /* 全部转换为大写 */
}
.capitalize {
text-transform: capitalize; /* 每个单词首字母大写 */
}
四、文本溢出处理属性
当文本内容超出容器宽度时，需要使用相关属性处理溢出效果，避免文本溢出影响页面布局。
1. white-space
该属性用于设置文本如何处理空白和换行，常用取值包括nowrap（不换行）、pre（保留空白和换行）、pre-wrap（保留空白，正常换行）。
.no-wrap {
white-space: nowrap; /* 文本不换行，超出容器宽度 */
}
2. text-overflow
该属性用于设置文本溢出时的显示效果，需要和white-space: nowrap、overflow: hidden配合使用，常用取值为ellipsis（显示省略号）。
.ellipsis-text {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
width: 200px; /* 固定容器宽度 */
}
五、属性使用注意事项
- font-family设置多个字体时，通用字体系列要放在最后，作为兜底选项
- line-height使用数字取值时，子元素会继承这个比例，而不是固定的行高值，更适合响应式场景
- text-overflow生效的前提是容器设置了overflow为非visible值，且文本不换行
- text-decoration在CSS3之后支持单独设置线条样式、颜色，比如text-decoration: underline red wavy可以设置红色波浪下划线
实际开发中可以根据具体的文本样式需求，选择合适的CSS文本属性组合使用，实现符合设计要求的文本展示效果。如果需要同时设置多个字体相关属性，也可以使用font简写属性，按照font-style、font-weight、font-size/line-height、font-family的顺序设置，简化代码书写。
/* font简写属性示例，设置斜体、加粗、16px大小、1.5倍行高、微软雅黑字体 */
.text {
font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;
}
CSS文本属性font_familytext_alignline_height修改时间：2026-07-08 22:06:39