CSS3 文本样式 - line-height 属性

核心知识点

  1. line-height 属性的基本概念
  2. line-height 的取值范围
  3. line-height 的计算方式
  4. line-height 的实际应用
  5. line-height 与字体大小的关系
  6. line-height 的浏览器兼容性
  7. line-height 的最佳实践

学习目标

  1. 理解 line-height 属性的作用和语法
  2. 掌握 line-height 的各种取值及其效果
  3. 能够根据设计需求选择合适的行高
  4. 了解 line-height 与字体大小的关系
  5. 学会在不同场景下应用 line-height 属性

一、line-height 属性的基本概念

line-height 属性用于指定文本行之间的垂直距离，即行高。它是 CSS3 文本样式中的重要属性之一，直接影响文本的可读性和整体美观度。

语法

line-height: normal | <number> | <length> | <percentage>;

二、line-height 的取值范围

line-height 属性支持以下几类取值：

1. normal

默认值，由浏览器根据字体家族和字体大小自动计算的行高。通常在 1.0 到 1.2 之间。

2.

纯数字值，表示字体大小的倍数。例如，line-height: 1.5 表示行高为字体大小的 1.5 倍。

3.

带单位的长度值，如 px、em、rem 等。例如，line-height: 24px 表示行高为 24 像素。

4.

百分比值，表示字体大小的百分比。例如，line-height: 150% 表示行高为字体大小的 150%。

三、line-height 的计算方式

1. 数字值计算

当使用纯数字值时，行高会根据元素的字体大小动态计算：

/* 行高 = 字体大小 * 1.5 */
p {
  font-size: 16px;
  line-height: 1.5; /* 实际行高 = 16px * 1.5 = 24px */
}

2. 长度值计算

当使用带单位的长度值时，行高是固定的：

/* 行高 = 24px，与字体大小无关 */
p {
  font-size: 16px;
  line-height: 24px; /* 实际行高 = 24px */
}

3. 百分比值计算

当使用百分比值时，行高会根据元素的字体大小计算，但只计算一次：

/* 行高 = 字体大小 * 150% */
p {
  font-size: 16px;
  line-height: 150%; /* 实际行高 = 16px * 150% = 24px */
}

四、line-height 的实际应用

示例 1：基本使用

/* 默认行高 */
.default-text {
  line-height: normal;
}

/* 数字值 */
.optimal-text {
  line-height: 1.5;
}

/* 长度值 */
.fixed-text {
  line-height: 24px;
}

/* 百分比值 */
.percent-text {
  line-height: 150%;
}

示例 2：不同元素的行高设置

/* 标题行高 */
h1 {
  font-size: 24px;
  line-height: 1.2; /* 标题通常使用较小的行高 */
}

h2 {
  font-size: 20px;
  line-height: 1.3;
}

/* 正文字高 */
p {
  font-size: 16px;
  line-height: 1.5; /* 正文通常使用 1.4-1.6 的行高 */
}

/* 小文字高 */
small {
  font-size: 12px;
  line-height: 1.4;
}

示例 3：垂直居中

/* 使用 line-height 实现单行文本垂直居中 */
.button {
  height: 40px;
  line-height: 40px; /* 与高度相同 */
  text-align: center;
  background-color: #3498db;
  color: white;
  padding: 0 20px;
}

/* 使用 flexbox 实现多行文本垂直居中 */
.container {
  display: flex;
  align-items: center;
  height: 100px;
  background-color: #f0f0f0;
}

.container p {
  line-height: 1.5;
}

五、line-height 与字体大小的关系

最佳行高比例

不同字体大小和类型的文本，推荐的行高比例也不同：

  • 小字体（12px 以下）：推荐行高 1.4-1.6
  • 正文字体（14px-18px）：推荐行高 1.4-1.6
  • 大字体（18px 以上）：推荐行高 1.2-1.4
  • 标题字体：推荐行高 1.1-1.3

字体类型的影响

  • 无衬线字体：通常需要稍大的行高
  • 衬线字体：通常需要稍小的行高
  • 等宽字体：通常需要更大的行高

六、line-height 的浏览器兼容性

line-height 属性在所有现代浏览器中都得到了良好支持。然而，不同浏览器对默认行高的计算可能略有差异，特别是在处理不同字体家族时。

兼容性注意事项

  1. 默认值：不同浏览器的默认 normal 值可能略有不同
  2. 继承行为：line-height 会继承给子元素，但继承方式取决于取值类型
  3. 行高计算：不同浏览器对复杂场景下的行高计算可能略有差异

七、line-height 的继承行为

数字值继承

当使用纯数字值时，子元素会继承数字本身，而不是计算后的行高：

/* 父元素 */
.parent {
  font-size: 16px;
  line-height: 1.5; /* 计算行高 = 24px */
}

/* 子元素 */
.child {
  font-size: 12px;
  /* 继承 line-height: 1.5，计算行高 = 12px * 1.5 = 18px */
}

长度值和百分比值继承

当使用长度值或百分比值时，子元素会继承计算后的行高：

/* 父元素 */
.parent {
  font-size: 16px;
  line-height: 24px; /* 或 line-height: 150%; */
}

/* 子元素 */
.child {
  font-size: 12px;
  /* 继承 line-height: 24px，与子元素字体大小无关 */
}

八、line-height 的最佳实践

1. 使用纯数字值

推荐使用纯数字值来设置 line-height，因为它具有更好的继承行为：

/* 推荐 */
body {
  line-height: 1.5;
}

/* 不推荐 */
body {
  line-height: 150%; /* 或 line-height: 24px; */
}

2. 为不同元素设置合适的行高

根据元素类型和字体大小设置合适的行高：

/* 全局设置 */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* 标题设置 */
h1, h2, h3 {
  line-height: 1.2;
}

/* 引用设置 */
blockquote {
  line-height: 1.6;
}

/* 代码设置 */
code {
  line-height: 1.4;
}

3. 考虑响应式设计

在响应式设计中，可能需要根据屏幕尺寸调整行高：

/* 移动端 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* 桌面端 */
@media (min-width: 769px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }
}

九、ASCII 示意图：line-height 效果对比

line-height 效果对比示意图：

┌───────────────────────────────────────────────┐
│ 行高值         │ 效果                          │
├───────────────────────────────────────────────┤
│ 1.0           │ This is text with line-height │
│               │ set to 1.0. It's very compact.│
├───────────────────────────────────────────────┤
│ 1.5           │ This is text with line-height │
│               │ set to 1.5. It's comfortable  │
│               │ to read.                      │
├───────────────────────────────────────────────┤
│ 2.0           │ This is text with line-height │
│               │ set to 2.0. It has more space │
│               │ between lines.                │
└───────────────────────────────────────────────┘

十、实战练习

练习 1：基本使用

创建一个页面，展示不同 line-height 值的效果。

要求：

  • 展示 normal、1.0、1.5 和 2.0 四种行高效果
  • 为每种效果添加适当的标签
  • 观察不同行高下的可读性差异

练习 2：垂直居中

创建一个页面，使用 line-height 实现单行文本的垂直居中。

要求：

  • 创建一个固定高度的容器
  • 在容器中放置单行文本
  • 使用 line-height 使文本垂直居中
  • 确保在不同字体大小下都能正确居中

练习 3：响应式行高

创建一个页面，在不同屏幕尺寸下使用不同的行高。

要求：

  • 在小屏幕上使用较小的字体大小和适当的行高
  • 在大屏幕上使用较大的字体大小和适当的行高
  • 确保在所有屏幕尺寸下文本都具有良好的可读性

十一、总结

  1. line-height 属性用于控制文本行之间的垂直距离，直接影响文本的可读性
  2. 它支持四类取值：normal（默认）、（数字）、（长度）和 （百分比）
  3. 数字值是推荐的设置方式，因为它具有更好的继承行为
  4. 最佳行高比例取决于字体大小和类型，通常在 1.2-1.6 之间
  5. 行高的设置应考虑可读性、设计需求和响应式布局
  6. 在不同场景下，应根据元素类型和字体大小调整行高
  7. 通过合理使用 line-height，可以提高文本的可读性和整体美观度

十二、扩展阅读

  1. MDN Web Docs: line-height
  2. CSS-Tricks: line-height
  3. WebAIM: Typography
  4. Can I Use: line-height
« 上一篇 CSS3 文本样式 - font-style 属性 下一篇 » CSS3 文本样式 - font shorthand 属性
↑