跳至主要內容

文本与字体样式

Kpsmart2025年3月2日大约 22 分钟

文本与字体样式

文本是网页内容的核心，而字体则影响文本的视觉呈现。本章将介绍如何使用CSS控制文本和字体的样式。

基本文本样式

CSS提供了多种属性来控制文本的外观，包括颜色、对齐方式、装饰等。

文本颜色

color属性用于设置文本的颜色。

p {
  color: #333;               /* 使用十六进制值 */
  color: rgb(51, 51, 51);    /* 使用RGB值 */
  color: rgba(51, 51, 51, 0.8); /* 带透明度的RGB */
  color: hsl(0, 0%, 20%);    /* 使用HSL值 */
  color: red;                /* 使用颜色名称 */
}

文本对齐

text-align属性控制文本的水平对齐方式。

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

文本装饰

text-decoration属性用于添加或删除文本装饰，如下划线、上划线等。

p {
  text-decoration: none;           /* 无装饰 */
  text-decoration: underline;      /* 下划线 */
  text-decoration: overline;       /* 上划线 */
  text-decoration: line-through;   /* 删除线 */
}

/* 组合属性 */
a {
  text-decoration: underline red wavy; /* 红色波浪下划线 */
}

文本转换

text-transform属性控制文本的大小写。

p {
  text-transform: none;        /* 保持原样 */
  text-transform: capitalize;  /* 每个单词首字母大写 */
  text-transform: uppercase;   /* 全部大写 */
  text-transform: lowercase;   /* 全部小写 */
}

文本缩进

text-indent属性设置文本首行的缩进。

p {
  text-indent: 2em;    /* 缩进两个字符宽度 */
  text-indent: 20px;   /* 缩进20像素 */
  text-indent: 10%;    /* 缩进容器宽度的10% */
}

字母间距

letter-spacing属性调整字母之间的间距。

p {
  letter-spacing: normal;  /* 正常间距 */
  letter-spacing: 2px;     /* 增加2像素间距 */
  letter-spacing: -1px;    /* 减少1像素间距 */
}

单词间距

word-spacing属性调整单词之间的间距。

p {
  word-spacing: normal;  /* 正常间距 */
  word-spacing: 5px;     /* 增加5像素间距 */
  word-spacing: -2px;    /* 减少2像素间距 */
}

行高

line-height属性设置行与行之间的距离。

p {
  line-height: normal;    /* 浏览器默认值，通常约为1.2 */
  line-height: 1.6;       /* 1.6倍字体大小 */
  line-height: 24px;      /* 固定行高24像素 */
  line-height: 150%;      /* 字体大小的150% */
}

文本方向

direction和unicode-bidi属性控制文本的方向。

p {
  direction: ltr;                /* 从左到右（默认值） */
  direction: rtl;                /* 从右到左 */
  unicode-bidi: normal;          /* 正常 */
  unicode-bidi: bidi-override;   /* 覆盖双向算法 */
}

垂直对齐

vertical-align属性设置元素的垂直对齐方式。

span {
  vertical-align: baseline;    /* 基线对齐（默认值） */
  vertical-align: sub;         /* 下标 */
  vertical-align: super;       /* 上标 */
  vertical-align: top;         /* 顶部对齐 */
  vertical-align: middle;      /* 中部对齐 */
  vertical-align: bottom;      /* 底部对齐 */
  vertical-align: text-top;    /* 文本顶部对齐 */
  vertical-align: text-bottom; /* 文本底部对齐 */
  vertical-align: 5px;         /* 相对于基线上升5像素 */
}

空白处理

white-space属性指定如何处理元素内的空白。

p {
  white-space: normal;     /* 默认值，空白会被浏览器忽略 */
  white-space: nowrap;     /* 文本不换行 */
  white-space: pre;        /* 保留空白，类似<pre>标签 */
  white-space: pre-wrap;   /* 保留空白，但允许换行 */
  white-space: pre-line;   /* 合并空白，但保留换行 */
}

文本阴影

text-shadow属性为文本添加阴影效果。

h1 {
  /* 水平偏移 垂直偏移 模糊半径 颜色 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  
  /* 多重阴影 */
  text-shadow: 
    1px 1px 2px black, 
    0 0 10px blue;
  
  /* 发光效果 */
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6;
}

文本溢出

text-overflow属性指定当文本溢出包含元素时如何显示。

p {
  white-space: nowrap;       /* 防止文本换行 */
  overflow: hidden;          /* 隐藏溢出内容 */
  text-overflow: ellipsis;   /* 使用省略号表示溢出文本 */
}

/* 多行文本溢出（WebKit浏览器） */
p {
  display: -webkit-box;
  -webkit-line-clamp: 3;           /* 显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

换行规则

word-break和overflow-wrap（旧称word-wrap）属性控制文本如何换行。

p {
  /* word-break控制单词内部如何换行 */
  word-break: normal;      /* 使用默认的换行规则 */
  word-break: break-all;   /* 可在任意字符间换行 */
  word-break: keep-all;    /* 中日韩文本不断行 */
  
  /* overflow-wrap控制长单词是否可以被拆分 */
  overflow-wrap: normal;       /* 只在允许的断点换行 */
  overflow-wrap: break-word;   /* 必要时可在单词内换行 */
}

书写模式

writing-mode属性定义文本的排版方向。

div {
  writing-mode: horizontal-tb;    /* 水平方向，从上到下 */
  writing-mode: vertical-rl;      /* 垂直方向，从右到左 */
  writing-mode: vertical-lr;      /* 垂直方向，从左到右 */
}

字体样式

字体样式决定了文本的外观，包括字体系列、大小、粗细等。

字体系列

font-family属性指定文本的字体系列。

body {
  /* 按优先级列出多个字体，最后是通用字体系列 */
  font-family: "Helvetica Neue", Arial, sans-serif;
}

常用的通用字体系列：

  • serif：衬线字体（如Times New Roman）
  • sans-serif：无衬线字体（如Arial）
  • monospace：等宽字体（如Courier）
  • cursive：草书字体
  • fantasy：装饰字体

字体大小

font-size属性设置文本的大小。

p {
  font-size: 16px;      /* 绝对大小，像素 */
  font-size: 1.2em;     /* 相对于父元素的大小 */
  font-size: 1.2rem;    /* 相对于根元素的大小 */
  font-size: 120%;      /* 相对于父元素的百分比 */
  font-size: larger;    /* 相对于父元素的关键字 */
  font-size: small;     /* 绝对大小关键字 */
}

常用的绝对大小关键字：xx-small, x-small, small, medium, large, x-large, xx-large

相对大小关键字：smaller, larger

字体粗细

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

p {
  font-weight: normal;      /* 正常粗细，等同于400 */
  font-weight: bold;        /* 粗体，等同于700 */
  font-weight: lighter;     /* 比父元素更细 */
  font-weight: bolder;      /* 比父元素更粗 */
  font-weight: 100;         /* 最细 */
  font-weight: 400;         /* 正常 */
  font-weight: 700;         /* 粗体 */
  font-weight: 900;         /* 最粗 */
}

字体样式

font-style属性设置文本的倾斜样式。

p {
  font-style: normal;     /* 正常 */
  font-style: italic;     /* 斜体 */
  font-style: oblique;    /* 倾斜体（通常与italic相似） */
}

字体变体

font-variant属性设置文本的变体。

p {
  font-variant: normal;         /* 正常 */
  font-variant: small-caps;     /* 小型大写字母 */
}

字体拉伸

font-stretch属性设置文本的拉伸程度。

p {
  font-stretch: normal;           /* 正常 */
  font-stretch: condensed;        /* 压缩 */
  font-stretch: expanded;         /* 扩展 */
  font-stretch: extra-condensed;  /* 特别压缩 */
  font-stretch: ultra-expanded;   /* 特别扩展 */
}

字体简写属性

font属性是一个简写属性，可以在一个声明中设置多个字体属性。

p {
  /* font-style font-variant font-weight font-size/line-height font-family */
  font: italic small-caps bold 16px/1.5 Arial, sans-serif;
  
  /* 最简形式，只需要指定大小和字体系列 */
  font: 16px Arial, sans-serif;
}

Web字体

Web字体允许网页使用不在用户计算机上安装的字体。

@font-face规则

@font-face规则允许自定义字体。

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/mycustomfont.woff2') format('woff2'),
       url('fonts/mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

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

使用Google Fonts

Google Fonts提供了大量免费的Web字体。

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
body {
  font-family: 'Roboto', sans-serif;
}

字体显示策略

font-display属性控制字体加载时的显示行为。

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/mycustomfont.woff2') format('woff2');
  font-display: swap;    /* 立即使用后备字体，加载完成后切换 */
  /* 其他选项：auto, block, fallback, optional */
}

中文字体处理

中文网页的字体设置有一些特殊考虑。

常用中文字体组合

body {
  /* 中文优先 */
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
  
  /* 英文优先 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

中文字体子集化

对于大型中文字体，可以使用字体子集化减小文件大小。

@font-face {
  font-family: 'NotoSansSC-Subset';
  src: url('fonts/NotoSansSC-subset.woff2') format('woff2');
  unicode-range: U+4E00-9FFF; /* 仅包含常用汉字 */
}

实例：排版样式系统

<!DOCTYPE html>
<html>
<head>
  <title>排版样式系统</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    :root {
      /* 颜色变量 */
      --color-primary: #4a90e2;
      --color-secondary: #50e3c2;
      --color-text: #333;
      --color-text-light: #666;
      --color-background: #fff;
      --color-background-alt: #f5f7fa;
      --color-border: #eaeaea;
      
      /* 字体变量 */
      --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --font-serif: Georgia, "Times New Roman", serif;
      --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      
      /* 字体大小变量 */
      --font-size-base: 16px;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-md: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      
      /* 行高变量 */
      --line-height-tight: 1.25;
      --line-height-normal: 1.5;
      --line-height-relaxed: 1.75;
      
      /* 间距变量 */
      --spacing-base: 1rem;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
    }
    
    body {
      font-family: var(--font-sans);
      font-size: var(--font-size-base);
      line-height: var(--line-height-normal);
      color: var(--color-text);
      background-color: var(--color-background);
      padding: var(--spacing-xl);
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    /* 标题样式 */
    h1, h2, h3, h4, h5, h6 {
      margin-bottom: var(--spacing-md);
      line-height: var(--line-height-tight);
      font-weight: 700;
      color: var(--color-text);
    }
    
    h1 {
      font-size: var(--font-size-4xl);
      margin-bottom: var(--spacing-xl);
      letter-spacing: -0.025em;
    }
    
    h2 {
      font-size: var(--font-size-3xl);
      margin-top: var(--spacing-2xl);
      margin-bottom: var(--spacing-lg);
      padding-bottom: var(--spacing-xs);
      border-bottom: 1px solid var(--color-border);
    }
    
    h3 {
      font-size: var(--font-size-2xl);
      margin-top: var(--spacing-xl);
    }
    
    h4 {
      font-size: var(--font-size-xl);
    }
    
    h5 {
      font-size: var(--font-size-lg);
    }
    
    h6 {
      font-size: var(--font-size-md);
      color: var(--color-text-light);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    /* 段落样式 */
    p {
      margin-bottom: var(--spacing-md);
      max-width: 65ch; /* 可读性优化：限制行宽 */
    }
    
    /* 链接样式 */
    a {
      color: var(--color-primary);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s;
    }
    
    a:hover {
      border-bottom-color: var(--color-primary);
    }
    
    /* 引用样式 */
    blockquote {
      margin: var(--spacing-lg) 0;
      padding: var(--spacing-md) var(--spacing-lg);
      border-left: 4px solid var(--color-primary);
      background-color: var(--color-background-alt);
      font-style: italic;
      color: var(--color-text-light);
    }
    
    blockquote p:last-child {
      margin-bottom: 0;
    }
    
    /* 列表样式 */
    ul, ol {
      margin: var(--spacing-md) 0 var(--spacing-lg) var(--spacing-lg);
    }
    
    li {
      margin-bottom: var(--spacing-xs);
    }
    
    /* 代码样式 */
    code {
      font-family: var(--font-mono);
      font-size: var(--font-size-sm);
      background-color: var(--color-background-alt);
      padding: 0.2em 0.4em;
      border-radius: 3px;
    }
    
    pre {
      font-family: var(--font-mono);
      font-size: var(--font-size-sm);
      background-color: var(--color-background-alt);
      padding: var(--spacing-md);
      margin: var(--spacing-md) 0;
      overflow-x: auto;
      border-radius: 4px;
    }
    
    pre code {
      padding: 0;
      background-color: transparent;
    }
    
    /* 文本样式变体 */
    .text-xs { font-size: var(--font-size-xs); }
    .text-sm { font-size: var(--font-size-sm); }
    .text-md { font-size: var(--font-size-md); }
    .text-lg { font-size: var(--font-size-lg); }
    .text-xl { font-size: var(--font-size-xl); }
    
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-justify { text-align: justify; }
    
    .text-light { color: var(--color-text-light); }
    .text-primary { color: var(--color-primary); }
    .text-secondary { color: var(--color-secondary); }
    
    .font-serif { font-family: var(--font-serif); }
    .font-mono { font-family: var(--font-mono); }
    
    .font-thin { font-weight: 100; }
    .font-normal { font-weight: 400; }
    .font-bold { font-weight: 700; }
    
    .italic { font-style: italic; }
    .uppercase { text-transform: uppercase; }
    .capitalize { text-transform: capitalize; }
    
    .line-tight { line-height: var(--line-height-tight); }
    .line-relaxed { line-height: var(--line-height-relaxed); }
    
    .tracking-tight { letter-spacing: -0.025em; }
    .tracking-wide { letter-spacing: 0.05em; }
    
    /* 特殊文本效果 */
    .text-shadow {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .text-gradient {
      background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    
    .text-truncate {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .text-multiline-truncate {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="text-gradient">文本与字体样式系统</h1>
    
    <h2>标题层级</h2>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    
    <h2>段落文本</h2>
    <p>这是一个基本段落。CSS提供了多种属性来控制文本的外观，包括颜色、对齐方式、装饰等。良好的排版可以提高内容的可读性和用户体验。</p>
    <p class="text-light">这是一个浅色文本段落，通常用于次要信息或说明文字。</p>
    <p class="text-primary">这是一个主色调文本段落，用于强调重要内容。</p>
    <p class="text-center">这是一个居中对齐的段落，适合用于引言或特殊内容。</p>
    <p class="text-justify">这是一个两端对齐的段落。两端对齐可以使文本在视觉上更整齐，但有时可能会导致单词间距不均匀，特别是在窄列中。在使用时需要注意可读性。</p>
    
    <h2>文本变体</h2>
    <p class="text-xs">超小文本 - 用于注释或辅助信息</p>
    <p class="text-sm">小文本 - 用于次要内容</p>
    <p class="text-md">中等文本 - 标准正文大小</p>
    <p class="text-lg">大文本 - 用于重要内容</p>
    <p class="text-xl">超大文本 - 用于引人注目的内容</p>
    
    <p class="uppercase">这是全大写文本</p>
    <p class="capitalize">这是首字母大写文本</p>
    <p class="italic">这是斜体文本</p>
    <p class="font-bold">这是粗体文本</p>
    <p class="font-thin">这是细体文本</p>
    
    <p class="font-serif">这是衬线字体文本，通常用于正式或传统内容。</p>
    <p class="font-mono">这是等宽字体文本，通常用于代码或技术内容。</p>
    
    <h2>特殊文本效果</h2>
    <p class="text-shadow">这是带有文本阴影的段落，可以增加深度感。</p>
    <p class="text-gradient">这是带有渐变效果的文本，可以创造出引人注目的标题。</p>
    
    <div style="width: 300px;">
      <p class="text-truncate">这是一个很长的文本，会被截断并显示省略号，适合用于空间有限的情况下显示标题或描述。</p>
    </div>
    
    <div style="width: 300px;">
      <p class="text-multiline-truncate">这是一个多行截断的文本示例。当文本内容过长时，会在指定的行数后截断并显示省略号。这对于卡片、列表项等UI元素中的描述文本非常有用，可以保持界面的整洁和一致性。</p>
    </div>
    
    <h2>引用和代码</h2>
    <blockquote>
      <p>这是一个引用块。引用块通常用于显示来自其他来源的内容或重要的引述。</p>
    </blockquote>
    
    <p>内联代码示例: <code>font-family: sans-serif;</code></p>
    
    <pre><code>/* 代码块示例 */
.text-gradient {
  background: linear-gradient(to right, #4a90e2, #50e3c2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}</code></pre>
    
    <h2>行高和字母间距</h2>
    <p class="line-tight">这是一个行高较紧凑的段落。紧凑的行高适合标题或短文本，但对于长篇内容可能会降低可读性。</p>
    <p>这是一个标准行高的段落。标准行高通常为字体大小的1.5倍，是大多数正文内容的理想选择。</p>
    <p class="line-relaxed">这是一个行高较宽松的段落。宽松的行高可以提高长篇内容的可读性，特别是在小字体或复杂内容中。</p>
    
    <p class="tracking-tight">这是一个字母间距较紧的文本。紧凑的字母间距适合大标题，可以使文本看起来更紧凑。</p>
    <p>这是一个标准字母间距的文本。</p>
    <p class="tracking-wide">这是一个字母间距较宽的文本。宽松的字母间距适合小字体或全大写文本，可以提高可读性。</p>
  </div>
</body>
</html>

响应式排版

随着设备尺寸的变化，排版也需要相应调整以保持最佳可读性。

使用相对单位

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

h1 {
  font-size: 2rem; /* 相对于根元素的2倍大小 */
}

p {
  font-size: 1rem; /* 相对于根元素的大小 */
  line-height: 1.5; /* 无单位的行高，相对于元素自身字体大小 */
  margin-bottom: 1.5em; /* 相对于元素自身字体大小的1.5倍 */
}

使用视口单位

视口单位基于视口（浏览器窗口）的尺寸，非常适合响应式设计。

h1 {
  font-size: 5vw; /* 视口宽度的5% */
}

p {
  font-size: calc(16px + 0.5vw); /* 基础大小加上视口宽度的0.5% */
}

流体排版

流体排版使用calc()和视口单位创建平滑缩放的字体大小。

:root {
  --font-size-min: 16;
  --font-size-max: 24;
  --viewport-min: 320;
  --viewport-max: 1200;
  
  /* 计算流体字体大小 */
  --font-size-diff: calc(var(--font-size-max) - var(--font-size-min));
  --viewport-diff: calc(var(--viewport-max) - var(--viewport-min));
  --font-scale-ratio: calc(var(--font-size-diff) / var(--viewport-diff));
  --font-scale: calc(var(--font-scale-ratio) * 100vw);
  --font-size-fluid: calc(var(--font-size-min) * 1px + var(--font-scale));
}

body {
  font-size: clamp(
    var(--font-size-min) * 1px,
    var(--font-size-fluid),
    var(--font-size-max) * 1px
  );
}

媒体查询

使用媒体查询在不同屏幕尺寸下调整排版。

/* 基础样式 */
body {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

/* 平板设备 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2.5rem;
  }
}

/* 桌面设备 */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
  
  h1 {
    font-size: 3rem;
  }
}

排版最佳实践

可读性优化

body {
  /* 适合阅读的行宽 */
  max-width: 65ch; /* 约65个字符宽度 */
  
  /* 适合阅读的行高 */
  line-height: 1.5;
  
  /* 适当的字体大小 */
  font-size: 16px;
  
  /* 良好的字体选择 */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* 适当的颜色对比度 */
  color: #333;
  background-color: #fff;
}

排版层级

创建一个清晰的排版层级可以帮助用户理解内容结构。

:root {
  --scale-ratio: 1.25; /* 比例关系 */
}

body {
  font-size: 1rem;
}

h6 { font-size: 1rem; }
h5 { font-size: calc(1rem * var(--scale-ratio)); }
h4 { font-size: calc(1rem * var(--scale-ratio) * var(--scale-ratio)); }
h3 { font-size: calc(1rem * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio)); }
h2 { font-size: calc(1rem * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio)); }
h1 { font-size: calc(1rem * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio)); }

首字下沉效果

p.intro::first-letter {
  float: left;
  font-size: 3em;
  line-height: 0.8;
  padding-right: 0.1em;
  font-weight: bold;
  color: #4a90e2;
}

多栏文本

.multi-column {
  column-count: 2;      /* 列数 */
  column-gap: 2em;      /* 列间距 */
  column-rule: 1px solid #ddd; /* 列分隔线 */
}

/* 跨越所有列的标题 */
.multi-column h2 {
  column-span: all;
}

印刷特性

/* 连字 */
p {
  font-variant-ligatures: common-ligatures;
}

/* 数字样式 */
.table {
  /* 等宽数字，适合表格 */
  font-variant-numeric: tabular-nums;
}

.fraction {
  /* 分数 */
  font-variant-numeric: diagonal-fractions;
}

/* 避免孤立行 */
p {
  orphans: 2; /* 页面底部至少保留2行 */
  widows: 2;  /* 页面顶部至少保留2行 */
}

文本选择样式

::selection {
  background-color: #4a90e2;
  color: white;
}

实例：文章页面排版

<!DOCTYPE html>
<html>
<head>
  <title>文章页面排版</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      --color-text: #333;
      --color-text-light: #666;
      --color-accent: #4a90e2;
      --color-background: #fff;
      --color-background-alt: #f9f9f9;
      --color-border: #eee;
      
      --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-serif: "Noto Serif", Georgia, "Times New Roman", serif;
      --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
      
      --font-size-base: 18px;
      --line-height: 1.6;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: var(--font-serif);
      font-size: var(--font-size-base);
      line-height: var(--line-height);
      color: var(--color-text);
      background-color: var(--color-background);
      padding: 5% 0;
    }
    
    .article {
      max-width: 700px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    .article-header {
      margin-bottom: 2em;
      text-align: center;
    }
    
    .article-title {
      font-size: 2.5rem;
      line-height: 1.2;
      margin-bottom: 0.5em;
      font-weight: 700;
    }
    
    .article-meta {
      font-family: var(--font-sans);
      font-size: 0.9rem;
      color: var(--color-text-light);
    }
    
    .article-meta .separator {
      margin: 0 0.5em;
    }
    
    .article-content {
      margin-bottom: 3em;
    }
    
    .article-content p {
      margin-bottom: 1.5em;
    }
    
    .article-content p:first-of-type::first-letter {
      float: left;
      font-size: 3.5em;
      line-height: 0.8;
      padding-right: 0.1em;
      font-weight: bold;
      color: var(--color-accent);
    }
    
    .article-content h2 {
      font-size: 1.8rem;
      margin: 1.5em 0 0.8em;
      font-weight: 700;
    }
    
    .article-content h3 {
      font-size: 1.4rem;
      margin: 1.2em 0 0.6em;
      font-weight: 600;
    }
    
    .article-content blockquote {
      margin: 1.5em 0;
      padding: 1em 1.5em;
      border-left: 4px solid var(--color-accent);
      background-color: var(--color-background-alt);
      font-style: italic;
    }
    
    .article-content blockquote p:last-child {
      margin-bottom: 0;
    }
    
    .article-content ul, 
    .article-content ol {
      margin: 1em 0 1.5em 1.5em;
    }
    
    .article-content li {
      margin-bottom: 0.5em;
    }
    
    .article-content a {
      color: var(--color-accent);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s;
    }
    
    .article-content a:hover {
      border-bottom-color: var(--color-accent);
    }
    
    .article-content img {
      max-width: 100%;
      height: auto;
      margin: 1.5em 0;
      border-radius: 4px;
    }
    
    .article-content figure {
      margin: 2em 0;
    }
    
    .article-content figcaption {
      font-family: var(--font-sans);
      font-size: 0.9rem;
      color: var(--color-text-light);
      text-align: center;
      margin-top: 0.5em;
    }
    
    .article-content code {
      font-family: var(--font-mono);
      font-size: 0.9em;
      background-color: var(--color-background-alt);
      padding: 0.2em 0.4em;
      border-radius: 3px;
    }
    
    .article-content pre {
      font-family: var(--font-mono);
      font-size: 0.9em;
      background-color: var(--color-background-alt);
      padding: 1em;
      margin: 1.5em 0;
      overflow-x: auto;
      border-radius: 4px;
    }
    
    .article-content pre code {
      padding: 0;
      background-color: transparent;
    }
    
    .article-footer {
      font-family: var(--font-sans);
      margin-top: 3em;
      padding-top: 1.5em;
      border-top: 1px solid var(--color-border);
      font-size: 0.9rem;
    }
    
    @media (max-width: 768px) {
      :root {
        --font-size-base: 16px;
      }
      
      .article-title {
        font-size: 2rem;
      }
      
      .article-content p:first-of-type::first-letter {
        font-size: 3em;
      }
    }
  </style>
</head>
<body>
  <article class="article">
    <header class="article-header">
      <h1 class="article-title">文本与字体样式的艺术</h1>
      <div class="article-meta">
        <span class="article-author">作者：张三</span>
        <span class="separator">|</span>
        <time class="article-date">2023年5月15日</time>
        <span class="separator">|</span>
        <span class="article-category">排版设计</span>
      </div>
    </header>
    
    <div class="article-content">
      <p>排版是一门艺术，它关乎如何安排文字以使其既美观又易读。在网页设计中，良好的排版可以提升用户体验，引导用户关注重要内容，并建立清晰的视觉层次结构。CSS提供了丰富的属性来控制文本的外观和布局，使设计师能够创造出既美观又实用的排版效果。</p>
      
      <p>字体选择是排版的基础。不同的字体传达不同的情感和风格：衬线字体通常给人一种正式、传统的感觉，而无衬线字体则显得现代、简洁。等宽字体常用于代码显示，因为它们使字符对齐，便于阅读和理解代码结构。</p>
      
      <h2>字体大小与行高</h2>
      
      <p>字体大小直接影响可读性。太小的文字会使人阅读困难，而太大的文字则可能破坏页面布局。一般来说，正文文本的理想大小在16-18像素之间，但这也取决于所选字体的特性。</p>
      
      <p>行高（line-height）是另一个关键因素。适当的行高可以提高文本的可读性，通常应为字体大小的1.5-1.6倍。行高过小会使文本显得拥挤，而过大则会使段落看起来分散。</p>
      
      <blockquote>
        <p>排版不仅仅是关于美学，更是关于功能性。好的排版应该是透明的，读者应该专注于内容，而不是设计。</p>
      </blockquote>
      
      <h2>文本对齐与行宽</h2>
      
      <p>文本对齐方式影响阅读流畅度。在西方语言中，左对齐是最常见的选择，因为它为每个句子提供了一个一致的起点，使眼睛容易跟踪。居中对齐适用于标题或短文本，而两端对齐可能在某些正式文档中使用，但需要注意避免单词间出现过大的空白。</p>
      
      <p>行宽也是可读性的重要因素。研究表明，理想的行宽约为45-75个字符（包括空格）。太窄的行会导致眼睛频繁跳转，而太宽的行则使读者难以找到下一行的起点。</p>
      
      <h2>响应式排版</h2>
      
      <p>随着移动设备的普及，响应式排版变得越来越重要。使用相对单位（如rem、em和vw）而不是固定单位（如px）可以使文本在不同屏幕尺寸上保持适当的比例。媒体查询可以进一步调整特定屏幕尺寸下的排版细节。</p>
      
      <ul>
        <li>使用相对单位设置字体大小和间距</li>
        <li>为不同的屏幕尺寸设置基础字体大小</li>
        <li>保持合理的行宽和行高比例</li>
        <li>在小屏幕上增加对比度和可点击区域</li>
      </ul>
      
      <h2>字体加载优化</h2>
      
      <p>Web字体可以增强设计的独特性，但也可能导致性能问题。使用适当的字体加载策略，如字体子集化、预加载关键字体和使用<code>font-display</code>属性，可以平衡美观性和性能。</p>
      
      <pre><code>@font-face {
  font-family: 'CustomFont';
  src: url('fonts/custom-font.woff2') format('woff2');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}</code></pre>
      
      <p>最终，优秀的排版是内容、设计和技术的完美结合。它应该服务于内容，增强可读性，并为用户提供愉悦的阅读体验。</p>
    </div>
    
    <footer class="article-footer">
      <p>本文最后更新于2023年5月15日</p>
    </footer>
  </article>
</body>
</html>

总结

在本章中，我们学习了：

  1. 基本文本样式

    • 文本颜色、对齐、装饰和转换
    • 文本缩进、字母间距和单词间距
    • 行高和文本方向
    • 垂直对齐和空白处理
    • 文本阴影和溢出处理
    • 换行规则和书写模式

  2. 字体样式

    • 字体系列和通用字体系列
    • 字体大小、粗细和样式
    • 字体变体和拉伸
    • 字体简写属性

  3. Web字体

    • @font-face规则
    • 使用Google Fonts
    • 字体显示策略

  4. 中文字体处理

    • 常用中文字体组合
    • 中文字体子集化

  5. 响应式排版

    • 使用相对单位
    • 使用视口单位
    • 流体排版
    • 媒体查询

  6. 排版最佳实践

    • 可读性优化
    • 排版层级
    • 特殊效果（首字下沉、多栏文本等）
    • 印刷特性

通过掌握这些文本和字体样式技术，你可以创建既美观又易读的网页内容，提升用户体验。

练习

  1. 创建一个使用自定义Web字体的标题系统，包括不同级别的标题样式
  2. 设计一个响应式文章页面，在不同屏幕尺寸下保持最佳可读性
  3. 实现一个带有首字下沉效果和多栏布局的博客文章模板
  4. 为中文和英文混合内容创建一个优化的字体系统
  5. 使用CSS变量创建一个可主题化的排版系统，支持明暗模式切换

进一步学习