知识篇 -- CSS排版：美化文本的艺术

Ray Shine 2023/11/11 CSS核心概念

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

文本是网页内容的核心，而CSS排版则是将这些文本以美观、易读的方式呈现给用户的艺术。通过一系列的CSS属性，我们可以精细地控制字体的选择、大小、粗细、行高、对齐方式以及字符和单词之间的间距，从而极大地提升用户体验。

# 一、字体家族 (`font-family`)：选择合适的字体

font-family 属性用于指定文本的字体。浏览器会按照列表中指定的顺序查找并使用第一个可用的字体。

值：可以是一个具体的字体名称（如 "Arial", "Times New Roman"），也可以是一个通用字体家族名称（如 serif, sans-serif, monospace, cursive, fantasy）。
最佳实践：通常会提供一个字体列表，以确保在用户系统上找不到首选字体时，有备用字体可用，并以通用字体家族作为最终备选。

示例：

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
    font-family: Georgia, serif;
}

思考：使用Web字体（如Google Fonts）可以提供更丰富的字体选择，但需要考虑加载性能。

# 二、字体大小 (`font-size`)：控制文本的视觉大小

font-size 属性用于设置文本的字体大小。

值：可以是绝对单位（px），相对单位（em, rem, vw, vh），或关键字（medium, large, small 等）。
最佳实践：
- 对于响应式设计，推荐使用 rem 或 em，以便于通过调整根字体大小实现全局缩放。
- 避免使用过小的字体，确保可读性。

示例：

p {
    font-size: 16px; /* 绝对像素值 */
}
.responsive-text {
    font-size: 1.2rem; /* 相对于根元素字体大小的1.2倍 */
}

# 三、字体粗细 (`font-weight`)：强调文本

font-weight 属性用于设置文本的粗细。

值：可以是关键字（normal, bold, lighter, bolder），或数值（100 到 900，400 对应 normal，700 对应 bold）。
注意：数值粗细的实际效果取决于字体本身是否提供了这些粗细的字形。

示例：

strong {
    font-weight: bold;
}
.thin-text {
    font-weight: 300;
}

# 四、行高 (`line-height`)：控制文本的垂直间距

line-height 属性用于设置文本的行高，即文本行之间的垂直距离。

值：可以是数值（无单位，表示字体大小的倍数，推荐），长度单位（px, em, rem），或百分比。
最佳实践：
- 推荐使用无单位的数值，因为它会根据元素的 font-size 自动计算，保持比例。
- 合适的行高可以提高文本的可读性。

示例：

p {
    line-height: 1.6; /* 行高是字体大小的1.6倍 */
}

# 五、文本对齐方式 (`text-align`)：调整文本的水平位置

text-align 属性用于设置块级元素或表格单元格中内容的水平对齐方式。

值：left, right, center, justify (两端对齐)。

示例：

.center-text {
    text-align: center;
}
.justified-paragraph {
    text-align: justify;
}

# 六、文本装饰 (`text-decoration`)：添加或移除文本装饰线

text-decoration 属性用于设置文本的装饰线，如下划线、上划线、删除线等。

值：none, underline, overline, line-through。
注意：通常用于移除链接的下划线 (a { text-decoration: none; })。

示例：

a {
    text-decoration: none; /* 移除链接下划线 */
}
.strike-through {
    text-decoration: line-through;
}

# 七、字母间距 (`letter-spacing`) 和单词间距 (`word-spacing`)

letter-spacing：用于设置文本中字符之间的间距。
word-spacing：用于设置文本中单词之间的间距。
值：可以是长度单位（px, em, rem）。
何时使用：
- 微调文本的视觉密度，提升可读性。
- 在标题或特殊文本中创建艺术效果。

示例：

h2 {
    letter-spacing: 2px; /* 增加字母间距 */
}
.wide-words {
    word-spacing: 0.5em; /* 增加单词间距 */
}

# 八、其他常用排版属性

text-transform: 控制文本的大小写（uppercase, lowercase, capitalize）。
white-space: 控制元素内空白符的处理方式（normal, nowrap, pre, pre-wrap, pre-line）。
text-indent: 设置文本块中首行文本的缩进。
text-overflow: 当文本溢出其容器时，如何显示（通常与 white-space: nowrap; 和 overflow: hidden; 结合使用）。

通过灵活运用这些CSS排版属性，您可以将普通的文本转化为具有视觉吸引力且易于阅读的网页内容。

← 颜色选择器 →

一ξひβθ光 i