Skip to content

文字与排版

· 7 min

文字是网页内容的核心。CSS 提供了丰富的文字和排版属性，从字体选择到行间距，从文本对齐到溢出处理，掌握这些属性能让你的页面阅读体验大幅提升。

字体属性#

font-family#

指定字体：

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


code {
  font-family: 'Fira Code', 'SF Mono', Consolas, monospace;
}

🎯 字体回退规则：从左到右依次尝试，直到找到可用字体。

通用字体族：

.serif {
  font-family: serif;
} /* 衬线体 */
.sans-serif {
  font-family: sans-serif;
} /* 无衬线体 */
.monospace {
  font-family: monospace;
} /* 等宽字体 */
.cursive {
  font-family: cursive;
} /* 手写体 */
.fantasy {
  font-family: fantasy;
} /* 装饰体 */

系统字体栈：

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

font-size#

字体大小：

.text-xs {
  font-size: 0.75rem;
} /* 12px */
.text-sm {
  font-size: 0.875rem;
} /* 14px */
.text-base {
  font-size: 1rem;
} /* 16px */
.text-lg {
  font-size: 1.125rem;
} /* 18px */
.text-xl {
  font-size: 1.25rem;
} /* 20px */
.text-2xl {
  font-size: 1.5rem;
} /* 24px */
.text-3xl {
  font-size: 1.875rem;
} /* 30px */

响应式字体：

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

font-weight#

字重：

.thin {
  font-weight: 100;
}
.light {
  font-weight: 300;
}
.normal {
  font-weight: 400;
}
.medium {
  font-weight: 500;
}
.semibold {
  font-weight: 600;
}
.bold {
  font-weight: 700;
}
.extrabold {
  font-weight: 800;
}
.black {
  font-weight: 900;
}

font-style#

字体样式：

.normal {
  font-style: normal;
}
.italic {
  font-style: italic;
}
.oblique {
  font-style: oblique;
}

font 简写#

p {
  /* font: style weight size/line-height family */
  font:
    italic 600 1rem/1.5 'Helvetica Neue',
    sans-serif;
}

文本属性#

line-height#

行高：

.tight {
  line-height: 1.25;
}
.normal {
  line-height: 1.5;
}
.relaxed {
  line-height: 1.75;
}
.loose {
  line-height: 2;
}


/* 固定值 */
.fixed {
  line-height: 24px;
}

🎯 推荐使用无单位数值，它会相对于 font-size 计算。

letter-spacing#

字间距：

.tighter {
  letter-spacing: -0.05em;
}
.tight {
  letter-spacing: -0.025em;
}
.normal {
  letter-spacing: 0;
}
.wide {
  letter-spacing: 0.025em;
}
.wider {
  letter-spacing: 0.05em;
}
.widest {
  letter-spacing: 0.1em;
}

word-spacing#

词间距：

.words-tight {
  word-spacing: -0.1em;
}
.words-normal {
  word-spacing: normal;
}
.words-wide {
  word-spacing: 0.25em;
}

text-align#

文本对齐：

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.justify {
  text-align: justify;
}

text-decoration#

文本装饰：

.underline {
  text-decoration: underline;
}
.line-through {
  text-decoration: line-through;
}
.no-underline {
  text-decoration: none;
}


/* 详细控制 */
.custom-underline {
  text-decoration-line: underline;
  text-decoration-color: #3b82f6;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}


/* 简写 */
.fancy {
  text-decoration: underline wavy #3b82f6 2px;
}


/* 下划线偏移 */
a {
  text-underline-offset: 4px;
}

text-transform#

文本转换：

.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}

text-indent#

首行缩进：

.indent {
  text-indent: 2em;
}


/* 悬挂缩进 */
.hanging {
  text-indent: -2em;
  padding-left: 2em;
}

文本溢出处理#

white-space#

空白处理：

.normal {
  white-space: normal;
} /* 默认：合并空白，自动换行 */
.nowrap {
  white-space: nowrap;
} /* 不换行 */
.pre {
  white-space: pre;
} /* 保留空白和换行 */
.pre-wrap {
  white-space: pre-wrap;
} /* 保留空白，允许换行 */
.pre-line {
  white-space: pre-line;
} /* 合并空白，保留换行 */
.break-spaces {
  white-space: break-spaces;
} /* 保留空白和换行，末尾空格可能换行 */

word-break#

单词断行：

.normal {
  word-break: normal;
}
.break-all {
  word-break: break-all;
} /* 任意位置断行 */
.keep-all {
  word-break: keep-all;
} /* CJK 不断行 */

overflow-wrap#

溢出换行：

.normal {
  overflow-wrap: normal;
}
.break-word {
  overflow-wrap: break-word;
} /* 长单词可断行 */
.anywhere {
  overflow-wrap: anywhere;
} /* 任何位置可断行 */

text-overflow#

文本溢出显示：

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 自定义溢出字符 */
.custom-overflow {
  text-overflow: '...';
}

多行省略#

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

垂直文本#

writing-mode#

书写模式：

.horizontal {
  writing-mode: horizontal-tb;
} /* 默认：水平从左到右 */
.vertical-rl {
  writing-mode: vertical-rl;
} /* 垂直：从右到左 */
.vertical-lr {
  writing-mode: vertical-lr;
} /* 垂直：从左到右 */

text-orientation#

文字方向（垂直模式下）：

.upright {
  text-orientation: upright;
} /* 字符直立 */
.mixed {
  text-orientation: mixed;
} /* 默认：根据字符类型 */
.sideways {
  text-orientation: sideways;
} /* 字符侧躺 */

Web 字体#

@font-face#

@font-face {
  font-family: 'CustomFont';
  src:
    url('/fonts/custom.woff2') format('woff2'),
    url('/fonts/custom.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


body {
  font-family: 'CustomFont', sans-serif;
}

font-display#

控制字体加载行为：

@font-face {
  font-display: auto; /* 浏览器默认 */
  font-display: block; /* 隐藏文本直到加载完成 */
  font-display: swap; /* 先用后备字体，加载后替换 */
  font-display: fallback; /* 短暂隐藏，然后用后备字体 */
  font-display: optional; /* 可能不显示 Web 字体 */
}

🎯 swap 是最常用的选择，避免 FOIT（不可见文本闪烁）。

实战案例#

文章排版#

.article {
  max-width: 65ch;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.75;
  color: #374151;
}


.article h1 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #111827;
}


.article h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #1f2937;
}


.article p {
  margin-bottom: 1.25rem;
}


.article p:first-of-type::first-letter {
  font-size: 3.5em;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
  color: #3b82f6;
}


.article blockquote {
  padding-left: 1rem;
  border-left: 4px solid #e5e7eb;
  font-style: italic;
  color: #6b7280;
}


.article code {
  font-family: 'Fira Code', monospace;
  font-size: 0.875em;
  background: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
}

卡片标题截断#

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  /* 单行截断 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.card-description {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  /* 多行截断 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

链接样式#

a {
  color: #3b82f6;
  text-decoration: underline;
  text-decoration-color: rgba(59, 130, 246, 0.3);
  text-underline-offset: 2px;
  transition:
    color 0.2s,
    text-decoration-color 0.2s;
}


a:hover {
  color: #2563eb;
  text-decoration-color: currentColor;
}


/* 外部链接标记 */
a[href^='http']::after {
  content: ' ↗';
  font-size: 0.75em;
}

代码块#

.code-block {
  font-family: 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 2;
  white-space: pre;
  overflow-x: auto;
  background: #1f2937;
  color: #e5e7eb;
  padding: 1rem;
  border-radius: 8px;
}


/* 行号 */
.code-block .line-number {
  display: inline-block;
  width: 2rem;
  text-align: right;
  margin-right: 1rem;
  color: #6b7280;
  user-select: none;
}

竖排文字#

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 200px;
  line-height: 2;
  letter-spacing: 0.1em;
}


/* 中文古诗 */
.poem {
  writing-mode: vertical-rl;
  font-family: 'Noto Serif SC', serif;
  font-size: 1.25rem;
  line-height: 2.5;
  letter-spacing: 0.2em;
}

常见问题#

🤔 font-size 用 px 还是 rem？

推荐 rem，它相对于根元素字号，便于整体缩放和可访问性。

🤔 如何确保 CJK 文本不会从单词中间断开？

.cjk-safe {
  word-break: keep-all;
  overflow-wrap: break-word;
}

🤔 Web 字体加载慢怎么办？

  1. 使用 font-display: swap
  2. 预加载关键字体：<link rel="preload" href="font.woff2" as="font">
  3. 子集化字体（只包含需要的字符）

文字排版是页面阅读体验的基础。合理设置字体、行高、间距，处理好文本溢出，能让内容更易阅读。下一篇我们将学习 CSS 背景与渐变。