文字排版

这一课你将能做到

1. 用 font-family 写出跨平台字体栈
2. 控制字号、粗细、行高、对齐、装饰线、字间距
3. 用 @font-face 加载自定义字体
4. 写出符合可读性标准的正文排版

为什么要学

网页 90% 是文字，文字排版直接决定用户能不能读下去。line-height 太挤，用户读两行就走；字体栈写错，Mac 用户看到的是漂亮苹方，Windows 用户看到的是默认衬线，体验天差地别。

人话：排版就是文字的「呼吸感」——行距像楼层高度，字距像人和人的距离，太挤会窒息，太松会疏离。

先建立图像

<style>
    body {
        font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 16px;
        line-height: 1.6;
        color: #333;
    }
    h1 { font-size: 2rem; font-weight: 700; letter-spacing: 0.05em; }
    .intro { text-align: justify; text-indent: 2em; }
    .link { text-decoration: none; color: #0366d6; }
    .link:hover { text-decoration: underline; }
</style>

<h1>字排版示例</h1>
<p class="intro">这段文字两端对齐、首行缩进 2em。一段好的排版应该让读者忘记排版本身，专注于内容。</p>
<a href="#" class="link">这是一个无下划线的链接，悬停才出现</a>

跟着做

步骤 1：font-family 字体栈

body {
    font-family:
        -apple-system,        /* iOS/macOS 系统字体 */
        "PingFang SC",        /* 苹果中文苹方 */
        "Microsoft YaHei",    /* 微软雅黑 */
        "Helvetica Neue",     /* 经典西文 */
        Arial,                /* 兜底西文 */
        sans-serif;           /* 最终兜底：任何无衬线 */
}

浏览器从左往右找，找到第一个能用的就用。最后一定要写 sans-serif 或 serif 兜底。

带空格或中文的字体名要加引号。

步骤 2：font-size 与 font-weight

h1      { font-size: 2rem; }
p       { font-size: 1rem; }
.small  { font-size: 0.875rem; }

.thin   { font-weight: 300; }
.normal { font-weight: 400; }  /* 等价于 normal */
.bold   { font-weight: 700; }  /* 等价于 bold */

font-weight 取值 100-900，步进 100。但能否真的显示对应粗细，要看字体本身是否提供了这些字重。

步骤 3：line-height 行高

p { line-height: 1.6; }        /* 推荐：无单位数字，相对字号 */
p { line-height: 1.6em; }      /* 也行但会继承计算后的值 */
p { line-height: 24px; }       /* 死板不推荐 */

正文推荐 1.5-1.7，标题 1.2-1.4。

强烈建议用无单位数字：子元素继承的是「倍数」而不是「算出来的像素」，更灵活。

步骤 4：text-align 与 text-indent

.left    { text-align: left; }     /* 默认 */
.center  { text-align: center; }
.right   { text-align: right; }
.justify { text-align: justify; }  /* 两端对齐 */

p { text-indent: 2em; }            /* 首行缩进两字符 */