网页排版指南教程 — HTML/CSS 初学者项目教程

🧠 为什么排版如此重要？

排版（Typography）是设计文字的艺术与技术。在网页中，它直接影响内容的可读性、信息层级和品牌调性。研究表明，好的排版可以提升阅读速度 20% 以上，并显著降低用户的跳出率。另一方面，字体也能传递情感——衬线体给人传统、正式的感觉，无衬线体更现代、亲和，手写体则富有创造力和个性。

对于前端开发者来说，排版不是「选个好看的字体就完事」，而是一个需要综合考虑字体选择、字号系统、行高、字距、颜色对比度、响应式适配等多维度的系统工程。

1️⃣ 字体选择 — font-family 栈

CSS 的 font-family 属性接受一个「字体栈」——一个按优先级排列的字体列表。浏览器会依次尝试，直到找到系统中存在的字体：

/* 推荐的系统字体栈 */
body {
    font-family: -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial,
                 'Noto Sans SC', 'Microsoft YaHei',
                 sans-serif;
}

/* 等宽字体栈（代码展示） */
code {
    font-family: 'Fira Code', 'JetBrains Mono',
                 'Consolas', 'Courier New', monospace;
}

上面的系统字体栈利用操作系统自带的字体，加载速度最快（无需下载额外字体文件）。-apple-system 和 BlinkMacSystemFont 针对 macOS/iOS 的 San Francisco 字体，Segoe UI 对应 Windows，Roboto 用于 Android/Chrome OS 等。最后加上 Noto Sans SC（Google 的简体中文字体）和 Microsoft YaHei（微软雅黑），确保中文显示也美观。

2️⃣ Web Font — 使用 Google Fonts

如果你想使用非系统自带的字体，Web Font 是解决方案。Google Fonts 提供大量免费的开源字体，使用方式非常简单：

<!-- 在 head 中引入 Google Fonts -->
<link href="https://fonts.googleapis.com/css2?
      family=Inter:wght@400;600;800&
      family=Noto+Sans+SC:wght@400;700&
      display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'Inter', 'Noto Sans SC', sans-serif;
    }
    h1 {
        font-weight: 800;  /* ExtraBold */
    }
</style>

display=swap 参数很重要——它告诉浏览器在字体加载完成前先用系统字体显示文字（FOUT，Flash of Unstyled Text），而不是隐藏文字直到字体加载完成（FOIT，Flash of Invisible Text）。前者用户体验更好，用户至少可以立即开始阅读。

💡 性能提示： 每引入一种额外的字体都会增加加载时间。建议将 Web Font 数量控制在 2-3 种以内（例如一种中文字体 + 一种英文字体 + 一种等宽字体）。使用 font-display: swap 避免字体阻塞渲染。

3️⃣ @font-face — 自定义字体文件

如果你有自己的字体文件（.woff2 或 .woff），可以用 @font-face 规则加载。WOFF2 是目前最优的 Web Font 格式，压缩率高且被所有现代浏览器支持：

@font-face {
    font-family: 'MyCustomFont';
    src: url('/fonts/myfont.woff2') format('woff2'),
         url('/fonts/myfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;  /* 关键：防止字体阻塞 */
}

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

建议同时提供 WOFF2 和 WOFF 两个格式以兼容老旧浏览器。优先级是 WOFF2（更新、压缩率更高）在前，WOFF 在后作为降级方案。

4️⃣ 字号系统 — 建立清晰的视觉层级

一个好的页面应该让读者一眼看出「什么是最重要的内容」。这需要通过字号、字重和颜色的差异化来建立视觉层级：

/* 推荐的字号系统 — 使用 rem 单位实现响应式 */
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: 600; }
p  { font-size: clamp(0.95rem, 2vw, 1.1rem); font-weight: 400; }
small { font-size: 0.85rem; color: #6b7280; }

关键原则：标题用大字号 + 粗字重，正文用适中字号 + 普通字重，辅助文字用小字号 + 浅色。这种「大字重 + 小字重」的对比组合比「大小字号的简单放大」更有效。

5️⃣ 行高（line-height）与行长（line length）

行高和行长是影响长篇阅读舒适度的两个最关键因素。

行高：正文的推荐行高在 1.6~1.8 倍字号之间。太挤（1.2 以下）会让行与行粘连难读，太散（2.0 以上）会让视线跳跃。标题的行高可以小一些（1.2~1.4），因为标题通常只有一行或两行。

行长：每行文字的理想长度是 45~75 个字符（中文字符减半，约 25~35 个字）。太长的行导致读者看完一行后难以定位到下一行开头；太短的行导致眼球频繁换行，打断阅读节奏。

body {
    line-height: 1.7;          /* 正文行高 */
    max-width: 65ch;           /* 限制行长：约 65 个字符 */
}

/* 或者用 padding 限制容器宽度 */
.content {
    max-width: 720px;          /* 中文约 35 个字 */
    margin: 0 auto;
}

ch 单位是 CSS 中一个非常有用的相对单位——1ch 等于当前字体中数字「0」的宽度。用 max-width: 65ch 限制容器的最大宽度，可以自适应字体大小保持最佳行长。

6️⃣ 中文排版的特殊考量

中文排版和英文排版有显著差异，需要注意以下几点：

字体选择 — 中文字体通常自带「宋体」（衬线）和「黑体」（无衬线）两大类。网页中推荐使用无衬线字体（黑体类），屏幕显示更清晰。常用中文字体：Noto Sans SC、Microsoft YaHei、PingFang SC（macOS）、思源黑体。
字号 — 中文字符比英文字母复杂，同样 px 值下中文看起来更大一些。中文正文推荐 16px（1rem）起步，最小不应低于 14px。
字间距 — 中文不需要额外增加字间距，默认即可。英文标题可以适当增加 letter-spacing 提升质感。
混排对齐 — 中英文混排时，在中文和英文之间加一个空格会让视觉更舒适（但这个空格的添加推荐用 JS 自动化而非手动）。

/* 中文排版推荐设置 */
body {
    font-family: 'Noto Sans SC', 'PingFang SC',
                 'Microsoft YaHei', sans-serif;
    font-size: 1rem;           /* 16px */
    line-height: 1.8;          /* 中文行高略大于英文 */
    letter-spacing: 0.02em;    /* 极微量字间距，提升中文可读性 */
}

/* 英文标题增加字间距营造设计感 */
h1.en-title {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

7️⃣ 颜色与对比度

文字与背景的颜色对比度直接影响可读性。WCAG（Web 内容无障碍指南）建议：

正文 — 对比度不低于 4.5:1（AA 级）
大号文字（18px 以上加粗或 24px 以上）— 不低于 3:1
增强标准（AAA） — 不低于 7:1

/* 对比度检查示例 */
/* ❌ 对比度不足 */
.text-light {
    color: #9ca3af;   /* 在深色背景上约为 3.2:1，仅适合辅助文字 */
    background: #1f2937;
}

/* ✅ 足够对比度 */
.text-body {
    color: #e5e7eb;   /* 在 #1f2937 上约为 10:1 */
    background: #1f2937;
}

/* 使用 Chrome DevTools 检查对比度 */
/* 在 Elements 面板选中文字 → 查看 Styles 中的颜色值 → 点击颜色预览 */
/* DevTools 会自动显示对比度评级 */

Chrome DevTools 内置了对比度检查器——点击颜色预览方块就可以看到对比度评分和 WCAG 等级。

📝 完整实战：排版精美的博客文章页

综合以上所有技巧，下面是一个排版完整的博客文章页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排版示例博客</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
            background: #f8f9fa;
            color: #1f2937;
            line-height: 1.7;
        }
        .article {
            max-width: 720px;
            margin: 0 auto;
            padding: 3rem 1.5rem;
        }
        .article h1 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 0.5rem;
            color: #111827;
        }
        .article .meta {
            font-size: 0.9rem;
            color: #6b7280;
            margin-bottom: 2rem;
            letter-spacing: 0.02em;
        }
        .article h2 {
            font-size: clamp(1.3rem, 3vw, 1.7rem);
            font-weight: 700;
            margin: 2rem 0 0.75rem;
            color: #1f2937;
        }
        .article p {
            margin-bottom: 1.2rem;
            color: #374151;
        }
        .article p:first-of-type {
            font-size: 1.1rem;
            color: #4b5563;
            border-left: 4px solid #f97316;
            padding-left: 1rem;
        }
        .article blockquote {
            margin: 1.5rem 0;
            padding: 1rem 1.5rem;
            background: #f3f4f6;
            border-left: 4px solid #f97316;
            font-style: italic;
            color: #6b7280;
        }
        .article pre {
            background: #1f2937;
            color: #e5e7eb;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            font-size: 0.85rem;
            margin: 1.2rem 0;
            line-height: 1.6;
        }
        .article code {
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            font-size: 0.9em;
        }
        .article p code {
            background: #f3f4f6;
            padding: 0.15rem 0.4rem;
            border-radius: 3px;
            color: #f97316;
        }
        @media (max-width: 640px) {
            .article { padding: 2rem 1rem; }
        }
    </style>
</head>
<body>
    <article class="article">
        <h1>掌握网页排版：从基础到进阶</h1>
        <p class="meta">2026 年 6 月 1 日 · 前端设计 · 8 分钟阅读</p>

        <p>网页排版是前端开发中最容易被低估的技能之一。好的排版不会被人注意，但差的排版会立刻赶走读者。本文从字体选择、字号系统、行距、中文排版等方面系统讲解。</p>

        <h2>选择正确的字体</h2>
        <p>字体选择由品牌定位和内容类型决定。对于博客和技术文档，推荐使用无衬线字体，屏幕阅读更清晰。中文内容推荐 <code>Noto Sans SC</code> 或 <code>PingFang SC</code>。</p>

        <blockquote>
            "排版是文字穿上衣服之后的模样。好的排版让文字自己说话，坏的排版让读者只看到衣服。"
        </blockquote>

        <h2>建立排版层级</h2>
        <p>使用字号、字重和颜色的差异化来引导读者视线。标题要大而醒目，正文要舒适易读，辅助信息要低调不抢眼。clamp() 函数可以帮助实现响应式字号。</p>

        <pre>h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
p  { font-size: clamp(0.95rem, 2vw, 1.1rem); }
small { font-size: 0.85rem; color: #6b7280; }</pre>

        <p>掌握这些排版原则后，你的网页内容将不再只是信息的堆砌，而是一次愉悦的阅读体验。</p>
    </article>
</body>
</html>

这个实战示例展示了完整的排版设计：使用 Google Fonts 加载 Inter + Noto Sans SC 字体；通过 clamp() 实现响应式字号；首段文章引言用大字号 + 左侧橙色边框强调；代码内联样式与代码块区分清晰；引文用 blockquote 并设置斜体和边距；整体最大宽度 720px 确保最佳行长。

🎯 总结与最佳实践

字体栈要包含后备字体 — 始终在最后加上通用字体族（sans-serif、serif、monospace）。
Web Font 控制在 2-3 种 — 使用 font-display: swap 避免阻塞渲染。
正文行高 1.6~1.8，行长 45~75 字符 — 这是经过验证的最优可读性范围。
建立清晰的字号层级 — 让读者一眼分辨内容的主次关系。
注意中文排版特殊性 — 选择合适的字体、适当的字号和行高。
保证颜色对比度 — 正文至少 4.5:1，用 DevTools 检查。
使用 clamp() 实现流式排版 — 一个字号适应所有屏幕。

排版是「隐藏的艺术」——当它做得好时，没有人会注意到它；但当它做得不好时，每个人都会注意到。掌握本教程中的原则和技巧，你的网页文字将既实用又优雅。

🔤 网页排版指南教程

🧪 排版对比 — 好与坏的差距

🔴 糟糕的排版

🟢 优秀的排版

📏 字号层级示例