CSS文字排版全指南

字间距 (Letter Spacing)

属性语法

letter-spacing: normal; /* 默认值 */
letter-spacing: 1px;    /* 固定值 */
letter-spacing: 0.1em;  /* 相对单位 */

用途

控制字符之间的间距

使用场景

• 标题美化设计
• 小段文本强调效果
• 微调字体默认间距

示例效果

h1 {
  letter-spacing: 0.5px; /* 标题增加轻微字距 */
}

.tight-text {
  letter-spacing: -1px; /* 紧凑文本 */
}

行间距 (Line Height)

属性语法

line-height: normal; /* 默认值（约1.2） */
line-height: 1.6;    /* 无单位值（推荐） */
line-height: 24px;   /* 固定像素值 */
line-height: 150%;   /* 百分比值 */

最佳实践

示例

p {
  line-height: 1.7; /* 主体文本理想行高 */
}

article {
  line-height: calc(1em + 10px); /* 响应式行高 */
}

文字换行与断字控制

常用属性

/* 自动换行处理 */
overflow-wrap: break-word;  /* 优先保持单词完整 */
word-break: break-all;      /* 任意位置断行 */

/* 空白处理 */
white-space: nowrap;        /* 禁止换行 */
white-space: pre;           /* 保留空白和换行 */
white-space: pre-wrap;      /* 保留空白但自动换行 */

/* 连字符断词 */
hyphens: auto;              /* 自动加连字符 */
hyphens: manual;            /* 仅在有­时断词 */

使用场景对比

文本对齐与布局

水平对齐

text-align: left;      /* 左对齐（默认） */
text-align: right;     /* 右对齐 */
text-align: center;    /* 居中 */
text-align: justify;   /* 两端对齐 */

垂直对齐

vertical-align: baseline; /* 基线对齐（默认） */
vertical-align: middle;   /* 中间对齐 */
vertical-align: top;      /* 顶部对齐 */
vertical-align: bottom;   /* 底部对齐 */

字体相关属性

大小与粗细

font-size: 16px;       /* 固定大小 */
font-size: 1rem;       /* 相对根元素大小 */
font-size: 1.2em;      /* 相对父元素大小 */
font-weight: normal;   /* 正常（400） */
font-weight: bold;     /* 加粗（700） */
font-weight: 600;      /* 指定粗重度 */

字体系列

font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
/* 字体栈：优先使用第一种，若不支持则尝试后面的字体 */

响应式排版技巧

响应式字体大小

h1 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  /* 最小值: 1.8rem, 理想值: 5vw, 最大值: 2.5rem */
}

响应式行高

p {
  line-height: clamp(1.5, 3vw, 1.8);
}

排版综合示例

.article {
  /* 字体设置 */
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.1rem;
  
  /* 间距设置 */
  line-height: 1.7;
  letter-spacing: 0.3px;
  word-spacing: 0.5px;
  
  /* 断行与对齐 */
  overflow-wrap: break-word;
  text-align: justify;
  hyphens: auto;
  
  /* 段落间距 */
  margin-bottom: 1.5em;
}

实用技巧

1. ​​多语言优化​​：

   :lang(en) {
     hyphens: auto;
   }
   
   :lang(zh) {
     word-break: keep-all;
   }

2. ​​印刷体优化​​：

   .print-style {
     font-family: Garamond, serif;
     text-rendering: optimizeLegibility;
     letter-spacing: normal;
     line-height: 1.5;
   }

3. ​​代码块特殊处理​​：

   pre {
     font-family: "Courier New", monospace;
     white-space: pre-wrap;
     tab-size: 4;
   }

4. ​​增强可读性​​：

   .readable-text {
     max-width: 65ch; /* 理想行宽 */
     text-align: justify;
     hyphens: auto;
   }