我给大家做出了个流程图大家先看一下。

────────────────────────────────────────────────────────────────────────────────────┐
│                                  CSS3 文本样式核心体系                                  │
│                                  核心：8大基础属性 + 通用调试                           │
├───────────────────────────────────┬───────────────────────────────────┬───────────────┤
│           字体基础样式模块        │           文本布局调整模块        │   辅助体系    │
│           （4大核心属性）         │           （3大核心属性）         │ （1属性+调试）│
├────────────┬────────────┬────────┼────────────┬────────────┬────────┼───────────────┤
│  字体大小  │  字体粗细  │ 字体样式│  行间距    │  字符间距  │ 文本对齐│ 文本装饰+调试 │
├────────────┼────────────┼────────┼────────────┼────────────┼────────┼───────┬───────┤
│ 属性名     │ 属性名     │ 属性名  │ 属性名     │ 属性名     │ 属性名  │ 属性名 │ 调试工具│
│ font-size  │ font-weight│font-style│line-height │letter-spacing│text-align│text-deco│ 浏览器DevTools│
├────────────┼────────────┼────────┼────────────┼────────────┼────────┼───────┼───────┤
│ 核心取值   │ 核心取值   │ 核心取值│ 核心取值   │ 核心取值   │ 核心取值│ 核心取值│ 核心技巧│
│ px/rem     │ 400/700/bold│normal/italic│ 无单位/px  │ ±px      │ 左/中/右│ 无/下划│ 实时修改+定位│
├────────────┼────────────┼────────┼────────────┼────────────┼────────┼───────┼───────┤
│ 核心作用   │ 核心作用   │ 核心作用│ 核心作用   │ 核心作用   │ 核心作用│ 核心作用│ 适用场景│
│ 定文本大小 │ 分文本层级 │ 改字体形态│ 提升可读性 │ 调字符疏密 │ 控水平布局│ 加/清装饰线│ 全场景适配│
└────────────┴────────────┴────────┴────────────┴────────────┴────────┴───────┴───────┘
这个图片大概就是学习的流程。

一、 我们先把这八个标签记住

就按我们前整理的做，记住这些就行：

1. 字体大小（font-size）：就用 px 或 rem 调，就是控制字多大；
2. 字体粗细（font-weight）：记 400、700、bold 这三个行，用来区分标题和正文的；
3. 字体样式（font-style）：就两个选择，normal 是正常字，italic 是斜体，改字体样子用的；
4. 行间距（line-height）：要么写没单位的数，要么写 px，就是让字读着不挤；
5. 字符间距（letter-spacing）：用正负数 px 调，想让字松点就加，想紧点就减；
6. 文本对齐（text-align）：就左、中、右三个方向，控制文字在一行里的位置；
7. 文本装饰（text-decoration）：要么不加装饰，要么加下划线；
8. 调试：就用浏览器的 DevTools，改完数值立马能看效果。

二、

1. 就对着我们记的这 8 个属性试，一步一步来试着做。
   • 先改 font-size，比如把 16px 改成 24px，看字是不是真的变大了；
   • 再调 font-weight，分别换成 400、700、bold，用眼睛对比下这三个的粗细差别；
   • 接着改 line-height，先写 1.5（无单位），再改成 24px，感受下哪种行间距读着更得劲；
   • 然后调 letter-spacing，先写 2px（字变松），再写 - 1px（字变紧），看字符间距的变化；
   • 再试 text-align，依次选左、中、右，看文字在盒子里的位置咋挪的；
   • 最后改 text-decoration，先加下划线，再改成无，看下划线是不是没了；
2. 调试就练最基础的：在面板里直接改数值，实时看变化。

三、 用的时候按咱列来

1. 想调字大小→改 font-size（px/rem）；
2. 想区分标题和正文→改 font-weight（400/700/bold）；
3. 想弄斜体→改 font-style（italic），正常就改回 normal；
4. 想让文字好读→调 line-height；
5. 想调字之间的疏密→改 letter-spacing 的 ±px；
6. 想让文字居中 / 靠左 / 靠右→改 text-align；
7. 想加下划线或清掉→改 text-decoration；
8. 改完想看看对不对→用 DevTools 当场看效果。

四、 学习做的时候按框架来做

对着我们之前画的那个图，自己在脑子里过一遍：

1. 先分三大块：字体基础（大小、粗细、样式、行间距）、文本布局（字符间距、对齐）、辅助的（文本装饰 + 调试）；
2. 每块只对应咱记的 “取值 + 作用”，比如字体基础里的 font-size，取值就是 px/rem，作用就是定字大小；
3. 就记一个调试技巧：DevTools 改这些属性贼方便，不管啥场景都能用。

总结

1. 就学我们列的这 8 个属性 + 调试的内容；
2. 主要就是动手改 DevTools 里的数值，看效果，记住每个属性是干啥的；
3. 先把这 8 个的 “怎么调 + 调了能干啥” 练熟。

我们按照这个步骤来学就可以掌握如何使用css3来改变字体样式了。