CSS文本属性是前端样式开发中不可或缺的基础能力，它们负责控制网页中文字的字体形态、排列方式、装饰效果以及溢出表现。无论是阅读型文章的排版，还是数据面板中的紧凑文本，文本属性的合理搭配都会直接影响用户体验与界面美感。CSS提供了一整套彼此独立又相互配合的属性体系，掌握这些属性的取值规律与使用场景，是写出高质量样式的关键前提。
一、字体基础属性：决定文本的基本外观
字体类属性解决的是文本“长什么样”的问题，包括字体种类、字号大小、粗细程度和倾斜样式。这些属性可以直接继承到子元素，合理设置可以保证整个页面文字风格统一。
1. font-family
font-family用于指定文本使用的字体系列。它的取值可以是具体的字体名称，也可以是浏览器能识别的通用字体系列。实际项目里通常同时给出多个候选字体，浏览器会按照书写顺序从前往后依次匹配，找不到当前字体时再回退到下一项，直到最终落到一个通用系上。这种回退机制能有效应对不同操作系统之间的字体差异。
/* 优先使用微软雅黑，其次使用宋体，最后回退到系统默认的无衬线字体 */
body {
font-family: "Microsoft YaHei", "SimSun", sans-serif;
}
2. font-size
font-size设置文字大小。常用单位分为绝对长度单位和相对长度单位：px是固定的像素值，适合需要精确控制的场景；em相对于父元素的字号，层级嵌套时会累加计算；rem是CSS3引入的相对单位，始终相对于根元素html的字号，不受中间层级影响。百分比取值实际是相对父元素字号的倍数计算。在响应式布局中，rem配合根元素媒体查询是常见做法。
.text-fixed {
font-size: 14px; /* 固定像素大小 */
}
.text-relative {
font-size: 1.5rem; /* 相对根元素字体大小为1.5倍 */
}
.text-percent {
font-size: 120%; /* 相对父元素字体大小的120% */
}
3. font-weight
font-weight控制文字的粗细。可以使用normal与bold两个关键词，也可以使用从100到900的整百数值，数值越大字形越粗。系统默认的普通文字一般是400，加粗是700。需要注意的是，如果当前字体没有对应的字重，浏览器会自动进行近似匹配或合成加粗，效果可能略有偏差。
.normal-text {
font-weight: normal; /* 等同于400 */
}
.bold-text {
font-weight: bold; /* 等同于700 */
}
.heavy-text {
font-weight: 900; /* 更粗的字重，需字体本身支持 */
}
4. font-style
font-style用于设置字体的倾斜效果。italic使用字体文件里专门设计的斜体字形，oblique则是由浏览器把正体字形强行倾斜得到的。日常开发中最常遇到的是要覆盖掉默认倾斜的情况，例如重置标题组件或引文里的斜体样式，这时用normal恢复即可。
.emphasize {
font-style: italic; /* 斜体显示 */
}
.reset-emphasize {
font-style: normal; /* 恢复为正体 */
}
二、文本排版与布局属性：控制文字在容器中的位置
排版属性关注的是文字在行内和段落之间的空间排布。对齐方式、行高、字间距和段落缩进一起决定了文章的阅读节奏，是平衡视觉密度与可读性的重要工具。
1. text-align
text-align指定文本的水平对齐方式。左对齐是大多数阅读场景的默认选择，右对齐常用于表格数值列或装饰性文本，居中对齐用于标题与引导语。两端对齐justify会让每行文字首尾对齐，英文内容排布均匀，但中文段落最后一行不会拉伸，因此不会出现奇怪的整行间距。
.left {
text-align: left; /* 左对齐 */
}
.center {
text-align: center; /* 居中 */
}
.right {
text-align: right; /* 右对齐 */
}
.justify {
text-align: justify; /* 两端对齐 */
}
2. line-height
line-height定义一行文本基线到下一行基线的距离。可以传入数字、长度值或百分比。传数字时行高等于当前字号乘以该数值，这种写法的优势在于子元素继承的是比例而不是固定长度，当内部字号变化时行距能自动适应，因此它是最适合响应式场景的行高写法。
.article-body {
font-size: 16px;
line-height: 1.7; /* 实际行高约为27px，继承时保持比例 */
}
.dense-text {
line-height: 24px; /* 固定行高 */
}
3. letter-spacing 与 word-spacing
letter-spacing控制字符间的间距，中文场景下常用于标题的字距微调；word-spacing控制英文单词间的距离，对中文没有实际效果。两者都接受长度单位作为取值，正值扩大间距，负值让字符收紧。使用负值需要注意不要过小，否则字符会重叠影响阅读。
.title-wide {
letter-spacing: 3px; /* 标题字符间距扩大 */
}
.english-text {
word-spacing: 2px; /* 英文单词间距扩大 */
}
.compact-text {
letter-spacing: -0.5px; /* 字符略微收紧 */
}
4. text-indent
text-indent设置文本块首行的缩进距离。最常见的用法是让段落首行缩进两个字符宽度以实现中文排版习惯，通常使用2em作为取值，因为em基于当前字号计算，无论字号如何变化缩进都保持与两个字符的相对比例。
.paragraph {
text-indent: 2em; /* 首行缩进两字符 */
}
.no-indent {
text-indent: 0; /* 取消缩进 */
}
三、文本装饰与效果属性：增加视觉层次
装饰类属性负责给文本添加线条、阴影或大小写转换能力。它们不改变文本内容本身，却可以显著改变文本传达的视觉语气，比如删除线表示过时内容，阴影让标题产生层级感。
1. text-decoration
text-decoration是简写属性，用于一次性设置装饰线的类型、颜色与线条样式。常用值有underline下划线、overline上划线、line-through删除线以及none。CSS3之后允许为装饰线单独指定颜色和样式，例如underline red dashed可以绘制一条红色的虚线式下划线，这为链接状态和特殊标记提供了更灵活的表达能力。
.link-underline {
text-decoration: underline; /* 常规下划线 */
}
.del-text {
text-decoration: line-through; /* 删除线 */
}
.link-reset {
text-decoration: none; /* 去除默认下划线 */
}
.fancy-underline {
text-decoration: underline red wavy; /* 红色波浪下划线 */
}
2. text-shadow
text-shadow给文字添加阴影，模拟立体或发光效果。它的取值顺序是水平偏移、垂直偏移、模糊半径和颜色。水平与垂直偏移支持负值，表示向左或向上偏移；模糊半径为0时阴影边缘锐利，数值越大阴影越柔和。多个阴影可用逗号分隔叠加，创造出更复杂的视觉效果。
.shadow-basic {
/* 向右向下各偏移2px，模糊4px，半透明黑色阴影 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.shadow-layered {
/* 叠加双重阴影模拟发光效果 */
text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.6);
}
3. text-transform
text-transform用于转换英文文本的大小写形式，uppercase将所有字母转为大写，lowercase转为小写，capitalize将每个单词的首字母大写。这一属性并不会修改原始文本内容，只影响渲染结果，适合用在导航菜单、按钮标签等需要统一大小写风格的地方，省去了在HTML里手动改写文本的麻烦。
.menu-item {
text-transform: uppercase; /* 菜单全大写 */
}
.headline {
text-transform: capitalize; /* 每个单词首字母大写 */
}
.lowcase {
text-transform: lowercase; /* 全小写 */
}
四、文本溢出处理属性：约束超出容器的内容
在实际布局中，文本长度常常不可控，尤其是用户昵称、动态标题等动态内容。如果不加处理，超长文本会挤破布局或将容器撑开。CSS提供了文本溢出控制组合，将超出部分优雅地截断或隐藏。
1. white-space
white-space决定浏览器如何处理文本中的空白字符与换行符。nowrap强制文本在同一行内显示，直到遇到<br>才会换行；pre保留源码中的空格和换行；pre-wrap在保留空白的基础上允许常规自动换行。理解这些取值是掌握溢出控制的第一步，因为单行截断的前提就是强制不换行。
.keep-line {
white-space: nowrap; /* 强制单行显示 */
}
.code-block {
white-space: pre; /* 保留空格与换行 */
}
.flex-wrap {
white-space: pre-wrap; /* 保留空格并允许换行 */
}
2. text-overflow
text-overflow配合white-space: nowrap与overflow: hidden一起使用，才能在文本溢出容器时显示省略号。值为ellipsis时在文本末端显示省略号，值为clip额时直接截断。三个属性缺一不可：不换行保证文本水平延伸，隐藏溢出视口，省略号标记被截断的位置。这段组合是列表、卡片标题中最常见的单行省略方案。
.ellipsis-single {
width: 200px; /* 容器固定宽度 */
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏超出内容 */
text-overflow: ellipsis; /* 溢出显示省略号 */
}
五、属性组合使用与注意事项
文本属性不是孤立生效的，它们经常在同一个目标元素上叠加使用。比如一个标题可能同时需要设置font-size、font-weight、letter-spacing和text-shadow。为了简写多个字体属性，CSS提供了font综合属性，可以一次性声明样式、粗细、字号、行高和字体系列，并且声明的顺序有固定要求：先是font-style与font-weight，再是font-size与line-height，最后是font-family。字号是其中的必填项，字体系列则作为兜底选项放在末尾。
/* 简写：斜体加粗，16px字号，1.5倍行高，优先微软雅黑 */
.text {
font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;
}
在使用这些属性时还有几个容易踩坑的细节。第一，font-family中的通用字体系列要放在最后，否则可能匹配到系统默认字体而覆盖前面的优先字体。第二，line-height使用数字值继承的是比例，百分比和长度值继承的是计算后的固定值，因此数字写法在组件复用中更安全。第三，text-overflow是否生效取决于容器是否设置了非visible的overflow值，同时文本还必须处于不换行状态，三个条件缺一不可。第四，text-decoration在CSS3中可以细化线条的颜色与形态，但旧浏览器的兼容性需要额外留意，生产环境中建议搭配回退写法。
综合来看，CSS文本属性是一套既简单又精密的工具箱，每个属性只解决一个维度的文本问题，组合起来却可以覆盖几乎所有的文字排版需求。在前端开发中，建议先理清需求的本质：如果是为了识别度，优先调整字体与字重；如果是提升可读性，则重点调节行高与字距；如果是约束内容边界，就应该使用溢出处理组合。将文本属性按功能划分理解，再通过简写和组合减少冗余代码，就能在项目中稳定地输出清晰、美观、响应式的文本样式。
CSS文本属性font_familytext_alignline_height修改时间：2026-07-08 22:06:39