企业官网建设流程全解析

第08篇：字体与排版基础

文字是网页最主要的信息载体。无论设计多么精美的页面，如果字体选择不当、排版混乱，用户体验都会大打折扣。本篇将系统讲解 CSS 字体属性的使用方法，以及如何建立专业的排版系统。

学习目标

• 掌握font-family的字体栈写法与回退机制
• 理解font-size的常用单位及选择策略
• 掌握font-weight、font-style的用法
• 理解line-height对可读性的影响
• 学会使用@font-face引入自定义字体
• 了解 Web 字体格式（woff2、woff、ttf）与加载优化

核心知识点

一、font-family字体栈

浏览器会按顺序尝试字体，直到找到可用的为止。

body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;}

字体栈解析：

中文字体的特殊处理

/* 现代网站推荐的中文字体栈 */body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;}/* 衬线字体栈（适合长文阅读） */.article{font-family:"Noto Serif SC","Source Han Serif SC","SimSun","STSong",serif;}/* 等宽字体栈（代码展示） */code, pre{font-family:"SF Mono","Fira Code","Consolas","Monaco","Courier New",monospace;}

字体栈最佳实践：

1. 系统字体优先：-apple-system、Segoe UI等系统字体加载最快，且符合用户习惯
2. 中文放在英文后面：避免英文字符被中文字体渲染（中文字体的英文字形通常不够美观）
3. 通用族名收尾：sans-serif、serif、monospace作为最终回退
4. 用引号包裹含空格的字体名：如"Microsoft YaHei"

二、font-size字号设置

常用单位对比

html{font-size:16px;/* 浏览器默认值，通常不需要设置 */}body{font-size:1rem;/* = 16px */}h1{font-size:2.5rem;/* = 40px */}h2{font-size:2rem;/* = 32px */}.small-text{font-size:0.875rem;/* = 14px */}

为什么推荐用rem？

/* 用 rem：只需改一处，全站字号联动变化 */html{font-size:16px;/* 默认 */}@media(min-width:1200px){html{font-size:18px;/* 大屏字号整体放大 */}}/* 所有用 rem 的元素会自动按比例缩放 */

💡 用户的浏览器可以设置基础字号（如设为 20px 以适应视力需求）。用remrespect 用户的设置，用px则无视。

三、font-weight字重

.normal{font-weight:400;}/* 正常/常规 */.bold{font-weight:700;}/* 粗体 *//* 数值范围：100 - 900 */.thin{font-weight:100;}.extra-light{font-weight:200;}.light{font-weight:300;}.regular{font-weight:400;}.medium{font-weight:500;}.semi-bold{font-weight:600;}.bold{font-weight:700;}.extra-bold{font-weight:800;}.black{font-weight:900;}

注意：

• 不是所有字体都提供所有字重。如果指定了字体不存在的字重，浏览器会自动模拟（效果不佳）
• 使用可变字体（Variable Fonts）可以实现 1-1000 之间的任意字重

四、line-height行高

行高决定了文本行的垂直间距，是影响可读性的关键属性。

/* 无单位数值（推荐）：相对于当前元素的字体大小 */p{line-height:1.6;/* 字体大小的 1.6 倍 */}/* 百分比：相对于当前元素的字体大小 */p{line-height:160%;/* 等同于 1.6 */}/* 固定像素值（不推荐用于正文） */.heading{line-height:32px;}

为什么推荐无单位数值？

body{font-size:16px;line-height:1.6;/* 计算值 = 25.6px */}h1{font-size:32px;/* line-height 继承的是 1.6，不是 25.6px *//* 所以 h1 的行高 = 32px * 1.6 = 51.2px，比例保持一致 */}/* 如果 body 写的是 line-height: 25.6px *//* h1 会继承 25.6px，对于 32px 的字来说行高就太紧了 */

推荐行高值：

五、@font-face自定义字体

基本用法

@font-face{font-family:"MyFont";/* 自定义字体名称 */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:"MyFont",sans-serif;}

Web 字体格式

@font-face{font-family:"CustomFont";src:url("custom.woff2")format("woff2"),/* 现代浏览器 */url("custom.woff")format("woff"),/* 旧浏览器回退 */url("custom.ttf")format("truetype");/* 终极回退 */}

font-display加载策略

@font-face{font-family:"MyFont";src:url("myfont.woff2")format("woff2");font-display:swap;/* 推荐！先显示备用字体，加载完成后再切换 */}

💡swap是最佳选择：用户能立即看到文字内容（即使是用备用字体），加载完成后平滑切换到目标字体。

多个字重需要分别声明

@font-face{font-family:"MyFont";src:url("myfont-regular.woff2")format("woff2");font-weight:400;font-style:normal;}@font-face{font-family:"MyFont";src:url("myfont-bold.woff2")format("woff2");font-weight:700;font-style:normal;}/* 使用时 */.normal{font-family:"MyFont";font-weight:400;}.bold{font-family:"MyFont";font-weight:700;}

六、完整排版系统示例

/* ===== 基础设置 ===== */html{font-size:16px;-webkit-font-smoothing:antialiased;/* 字体抗锯齿（macOS） */-moz-osx-font-smoothing:grayscale;}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:1rem;line-height:1.7;color:#333;}/* ===== 标题层级 ===== */h1{font-size:2.5rem;/* 40px */line-height:1.2;font-weight:700;margin:2rem 0 1rem;}h2{font-size:2rem;/* 32px */line-height:1.3;font-weight:600;margin:1.8rem 0 0.8rem;}h3{font-size:1.5rem;/* 24px */line-height:1.4;font-weight:600;margin:1.5rem 0 0.6rem;}h4{font-size:1.25rem;/* 20px */line-height:1.4;font-weight:600;}/* ===== 正文与辅助文字 ===== */p{margin:0 0 1rem;}.small{font-size:0.875rem;/* 14px */line-height:1.5;}.caption{font-size:0.75rem;/* 12px */line-height:1.5;color:#666;}/* ===== 强调 ===== */strong, b{font-weight:700;}em, i{font-style:italic;}/* ===== 代码 ===== */code{font-family:"SF Mono","Consolas",monospace;font-size:0.875em;background:#f5f5f5;padding:2px 6px;border-radius:3px;}pre{font-family:"SF Mono","Consolas",monospace;font-size:0.875rem;line-height:1.6;background:#1a1a2e;color:#fff;padding:20px;border-radius:8px;overflow-x:auto;}

动手练习

练习 1：建立字体栈

为你的项目建立三套字体栈：

• 正文字体栈（无衬线，适合屏幕阅读）
• 文章标题字体栈（衬线，适合长文阅读）
• 代码字体栈（等宽，适合代码展示）
• 确保每套都包含系统字体、通用中文字体、通用族名

练习 2：排版层级系统

设计一个 5 级标题（h1-h5）+ 正文 + 小字的排版系统：

• 用rem单位，以 16px 为基准
• h1 为 40px，h5 为 16px，正文 16px，小字 14px
• 每个层级设置合适的 line-height（大标题紧凑，正文宽松）
• 设置合适的 margin，让标题间距有节奏感

练习 3：@font-face 实战

假设你有一个名为 “Inter” 的字体文件：

• 编写@font-face引入 Regular（400）和 Bold（700）两个字重
• 设置font-display: swap
• 写一段 HTML 展示该字体的正文和粗体效果
• 设置合理的备用字体栈

常见误区 ⚠️

速查卡片 📋

推荐字体栈

/* 无衬线（正文） */font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;/* 等宽（代码） */font-family:"SF Mono","Fira Code","Consolas",monospace;

字号层级速查（16px 基准）

@font-face 模板

@font-face{font-family:"MyFont";src:url("font.woff2")format("woff2"),url("font.woff")format("woff");font-weight:400;font-style:normal;font-display:swap;}

扩展阅读

• MDN: font-family
• MDN: @font-face
• systemfontstack.com（英文，系统字体栈参考）
• Google Fonts — 免费 Web 字体
• 阿里巴巴普惠体 — 免费商用中文字体

📌配套代码：> - CODE/08/typography-system.html — 完整排版系统演示

• CODE/08/custom-font.html — @font-face 自定义字体示例

🎉下一步：进入 第09篇：文本样式与控制，学习更多文字视觉效果。