CSS文本属性有哪些？完整文本属性列表及用法解析

CSS文本属性用于定义页面中文字的外观和排版规则，从字体选择到行间距调整，再到文本对齐方式，都可以通过对应的属性实现。掌握这些属性的用法，能快速完成各类文字样式的调整需求。

字体相关文本属性

这类属性主要控制文字的字体、大小、粗细等基础外观，是最常用的文本属性类别。

• font-family：设置文字的字体族，可设置多个备选字体，浏览器会按顺序优先使用第一个可用的字体。
• font-size：设置文字的大小，常用取值有px、em、rem等单位。
• font-weight：设置文字的粗细，取值可以是normal、bold，或者100到900的数值。
• font-style：设置文字的样式，比如italic表示斜体，normal表示正常样式。

/* 字体相关属性示例 */
.text-demo {
    font-family: "Microsoft YaHei", Arial, sans-serif; /* 优先使用微软雅黑，没有则使用Arial，最后用系统无衬线字体 */
    font-size: 16px;
    font-weight: 600; /* 中等偏粗的字体 */
    font-style: normal;
}

文本排版相关属性

这类属性用于控制文字在容器中的排列方式和间距规则。

• text-align：设置文本的水平对齐方式，取值有left、right、center、justify等。
• line-height：设置文本的行高，取值可以是数值、px、em等单位，数值表示相对于字体大小的倍数。
• letter-spacing：设置字符之间的间距，取值可以是normal或者具体的长度值。
• word-spacing：设置单词之间的间距，主要针对英文文本生效。
• text-indent：设置首行文本的缩进，常用取值为2em表示缩进两个字符宽度。

/* 文本排版属性示例 */
.paragraph {
    text-align: justify; /* 两端对齐 */
    line-height: 1.6; /* 行高为字体大小的1.6倍 */
    letter-spacing: 0.5px; /* 字符间距0.5px */
    text-indent: 2em; /* 首行缩进2字符 */
}

文本装饰与效果属性

这类属性用于给文本添加装饰效果或者控制文本的显示状态。

• text-decoration：设置文本的装饰线，比如underline表示下划线，line-through表示删除线，none表示无装饰。
• text-transform：控制文本的大小写转换，比如uppercase全部大写，lowercase全部小写，capitalize首字母大写。
• text-shadow：设置文本的阴影效果，取值依次为水平偏移、垂直偏移、模糊半径、阴影颜色。
• white-space：设置文本如何处理空白和换行，比如nowrap表示不换行，pre表示保留空白和换行。
• word-break：设置单词的换行规则，break-all表示允许在任意字符处换行，适合中文和英文混合的场景。

/* 文本装饰与效果属性示例 */
.title {
    text-decoration: none; /* 去掉默认下划线 */
    text-transform: uppercase; /* 全部转为大写 */
    text-shadow: 1px 1px 2px #999; /* 添加灰色阴影 */
    white-space: nowrap; /* 文本不换行 */
    word-break: break-all; /* 允许任意位置换行 */
}

常用文本属性取值对照表

下表整理了部分高频文本属性的常用取值和说明，方便快速查阅。

实际开发中可以根据具体的排版需求选择合适的文本属性，多个属性也可以组合使用，实现更复杂的文字样式效果。如果需要对特定元素设置文本样式，只需要给对应元素添加对应的CSS规则即可。

CSS文本属性font-familytext-alignline-height修改时间：2026-06-09 10:57:23