在网页前端开发中，文字排版是页面呈现的重要组成部分，合理调整CSS的字体、文本和行高属性，能够让页面内容更易读，视觉效果更协调。不同的属性对应不同的排版需求，掌握它们的用法是前端开发者的必备技能。
CSS字体属性调整方法
字体相关属性主要用于设置文字的外观样式，常用的属性包括font-family、font-size、font-weight等。
字体族设置
font-family用于指定文字的字体，可以设置多个备选字体，浏览器会按顺序优先使用靠前的字体，如果用户的设备中没有安装该字体，则使用下一个备选字体。
/* 设置字体族，优先使用微软雅黑，没有则使用宋体，最后使用系统无衬线字体 */
.text-font {
font-family: "Microsoft YaHei", "SimSun", sans-serif;
}
字体大小设置
font-size用于设置文字的大小，常用的取值单位有px、em、rem、%等。px是固定像素值，em相对于父元素的字体大小，rem相对于根元素的字体大小，%也是相对于父元素的字体大小。
/* 不同单位设置字体大小示例 */
.font-size-demo {
font-size: 16px; /* 固定16像素 */
/* font-size: 1.2em; 相对于父元素字体大小的1.2倍 */
/* font-size: 1.5rem; 相对于根元素字体大小的1.5倍 */
/* font-size: 120%; 相对于父元素字体大小的120% */
}
字体粗细设置
font-weight用于设置字体的粗细程度，取值可以是normal、bold、bolder、lighter，也可以是100到900的整百数值，其中400对应normal，700对应bold。
/* 字体粗细设置示例 */
.font-weight-demo {
font-weight: normal; /* 正常粗细，等同于400 */
/* font-weight: bold; 加粗，等同于700 */
/* font-weight: 300; 较细的字体 */
}
CSS文本属性调整方法
文本属性主要用于控制文字的排列、装饰等显示效果，常用的属性包括text-align、text-decoration、text-indent等。
文本对齐方式
text-align用于设置文本的水平对齐方式，可选值有left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。
/* 文本对齐方式示例 */
.text-align-demo {
text-align: center; /* 文本居中对齐 */
/* text-align: left; 左对齐 */
/* text-align: right; 右对齐 */
/* text-align: justify; 两端对齐 */
}
文本装饰效果
text-decoration用于设置文本的装饰线，可选值有none（无装饰）、underline（下划线）、overline（上划线）、line-through（删除线）。
/* 文本装饰效果示例 */
.text-decoration-demo {
text-decoration: underline; /* 添加下划线 */
/* text-decoration: none; 去除下划线，常用于a标签去除默认下划线 */
/* text-decoration: line-through; 添加删除线 */
}
文本缩进设置
text-indent用于设置文本首行的缩进距离，常用单位是px或者em，2em通常表示首行缩进两个字符。
/* 文本缩进示例 */
.text-indent-demo {
text-indent: 2em; /* 首行缩进两个字符 */
/* text-indent: 20px; 首行缩进20像素 */
}
CSS行高调整方法
行高指的是文本行与行之间的基线距离，通过line-height属性设置，合理的行高能够提升文字段落的可读性。
行高的取值方式
line-height的取值方式有多种，分别是固定像素值、相对字体大小的倍数、百分比、normal（浏览器默认行高，通常是1.2左右）。
- 像素值：直接设置固定的行高数值，不随字体大小变化。
- 倍数：相对于当前元素字体大小的倍数，字体大小变化时行高会同步变化。
- 百分比：相对于当前元素字体大小的百分比，效果和倍数类似。
行高设置示例
/* 不同方式设置行高示例 */
.line-height-demo {
font-size: 16px;
line-height: 24px; /* 固定行高24像素 */
/* line-height: 1.5; 行高为字体大小的1.5倍，即24px */
/* line-height: 150%; 行高为字体大小的150%，即24px */
/* line-height: normal; 使用浏览器默认行高 */
}
行高的常见应用场景
单行文本垂直居中时，可以设置line-height等于容器的高度，这样文本就会在容器中垂直居中显示。另外，段落文本的行高通常设置在1.5到1.8之间，能够让段落看起来更舒展，阅读更轻松。
/* 单行文本垂直居中示例 */
.single-line-center {
height: 40px;
line-height: 40px; /* 行高等于容器高度，实现垂直居中 */
text-align: center; /* 水平居中 */
}
/* 段落文本行高设置示例 */
.paragraph-text {
font-size: 14px;
line-height: 1.6; /* 段落行高设置为字体大小的1.6倍 */
text-indent: 2em; /* 首行缩进两个字符 */
}
常见问题解答
行高和字体大小的关系是什么
行高的取值如果是倍数或者百分比，会基于当前元素的字体大小计算实际的行高数值。如果设置固定像素值，则行高不会随字体大小变化，当字体大小超过行高时，文字行之间会出现重叠。
为什么设置了行高但文本没有垂直居中
如果是单行文本垂直居中，需要确保line-height的值等于容器的高度，同时容器没有设置padding或者border影响实际高度。如果是多行文本，单纯设置行高无法实现垂直居中，需要结合其他布局方式。
字体属性可以简写吗
可以，font是字体相关属性的简写属性，语法顺序是font-style、font-variant、font-weight、font-size/line-height、font-family，其中font-size和line-height之间用/分隔，font-size和font-family是必须设置的属性，否则简写无效。
/* 字体属性简写示例 */
.font-shorthand {
font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;
/* 对应：font-style:italic; font-weight:bold; font-size:16px; line-height:1.5; font-family:... */
}
CSS字体文本行高line_height修改时间：2026-06-16 05:54:37