精致排版：文字对齐方式与字体设置指南

前端

2023-12-18 17:06:38

CSS文字处理秘籍：轻松玩转文本样式

身为一位网页设计师，文字处理功力是打造吸睛网站不可或缺的利器。CSS（层叠样式表）提供了强大的文字控制功能，让我们一起来解锁它的秘诀！

1. 文字对齐：让文本井然有序

就像排队一样，文本也有不同的对齐方式。CSS提供了四种选项：

左对齐 (left) ：最常见的对齐方式，文本整齐地靠左排列。
右对齐 (right) ：标题和强调性文字的理想选择，文本靠右排列。
居中对齐 (center) ：让文本在页面中形成视觉中心，营造对称感。
两端对齐 (justify) ：正文排版的不二之选，使文本两端整齐对齐，呈现出更专业的外观。

2. 文本缩进：让文字呼吸空间

为文本的第一行添加缩进，可以打破单调感，增加视觉层次。CSS提供了以下属性：

text-indent： 设置文本缩进量。正值向右缩进，负值向左缩进。

3. 字体大小：文字大小一字千金

字体大小决定了文本的实际尺寸。CSS支持绝对大小（像素、厘米）和相对大小（百分比）：

font-size： 设置字体大小。绝对大小直接指定尺寸，相对大小以父元素的字体大小为基准。

4. 字体系列：让文本风格百变

从经典的宋体到时尚的Arial，字体系列决定了文本的外观。CSS提供了以下属性：

font-family： 指定字体系列。可以指定多个字体，以备首选字体不可用时备选。

5. 字体系统：让文本个性十足

字体系统指定了文本使用的字体类型，包括衬线字体（serif）、非衬线字体（sans-serif）、等宽字体（monospace）和手写字体（cursive）。

font-system： 设置字体系统，指定文本字体类型。

6. 文本格式：让文字焕然一新

除了对齐、大小和字体系列外，CSS还提供了其他文本格式属性：

font-weight： 设置字体粗细，可选值有 normal、bold、lighter 等。
font-style： 设置字体样式，可选值有 normal、italic、oblique 等。
text-decoration： 设置文本修饰，可选值有 none、underline、overline 等。

代码示例

/* 左对齐文本 */
p {
  text-align: left;
}

/* 右对齐标题 */
h1 {
  text-align: right;
}

/* 居中对齐段落 */
.centered-paragraph {
  text-align: center;
}

/* 两端对齐正文 */
article {
  text-align: justify;
}

/* 缩进文本 */
blockquote {
  text-indent: 2em;
}

/* 设置字体大小 */
body {
  font-size: 16px;
}

/* 指定字体系列 */
h2 {
  font-family: Arial, Helvetica, sans-serif;
}

/* 设定衬线字体系统 */
p {
  font-system: serif;
}

/* 加粗文本 */
strong {
  font-weight: bold;
}

/* 设置斜体 */
em {
  font-style: italic;
}

/* 添加下划线 */
a {
  text-decoration: underline;
}