一、font-size（字体大小）
概念：
推荐单位：
font-size 设置文字大小。推荐单位：
rem（相对于根元素）或 px（绝对单位）。
👇 不同字体大小
12px - 小号文字
16px - 正文（默认）
20px - 小标题
24px - 标题
1.5rem - 使用rem单位
1/* px 绝对单位 */
2font-size: 16px;
3
4/* rem 相对根元素（推荐） */
5font-size: 1rem;
6
7/* em 相对父元素 */
8font-size: 1.2em;
9
10/* 百分比 */
11font-size: 120%;
二、font-weight（字体粗细）
概念：
常用值：
font-weight 设置文字粗细。常用值：
normal(400)、bold(700)。
👇 不同字体粗细
300 - 细体
400 - 正常（normal）
500 - 中等
700 - 粗体（bold）
900 - 特粗
1/* 关键字 */
2font-weight: normal;
3font-weight: bold;
4
5/* 数值（100-900） */
6font-weight: 400; /* 等同 normal */
7font-weight: 700; /* 等同 bold */
三、font-family（字体族）
概念：
注意：中文字体名需要加引号。
font-family 设置字体，可以指定多个备选字体。注意：中文字体名需要加引号。
👇 不同字体
微软雅黑 - Microsoft YaHei
宋体 - SimSun
楷体 - KaiTi
Arial 无衬线字体
Times New Roman 衬线字体
1/* 单个字体 */
2font-family: 'Microsoft YaHei';
3
4/* 多个备选（从左到右优先级） */
5font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
6
7/* 常见字体分类 */
8/* 无衬线：Arial, Helvetica, sans-serif */
9/* 衬线：Times New Roman, serif */
10/* 等宽：Consolas, monospace */
四、line-height（行高）
概念：
推荐值：1.5-2（无单位，相对于字体大小）。
line-height 设置行与行之间的距离。推荐值：1.5-2（无单位，相对于字体大小）。
👇 不同行高对比
line-height: 1
这是一段测试文字
看看行高效果
line-height: 1.5
这是一段测试文字
看看行高效果
line-height: 2
这是一段测试文字
看看行高效果
1/* 无单位（推荐，相对于字体大小） */
2line-height: 1.5;
3
4/* 像素 */
5line-height: 24px;
6
7/* 百分比 */
8line-height: 150%;
9
10/* 垂直居中技巧 */
11.line-height-center {
12 line-height: 40px; /* 等于容器高度 */
13 height: 40px;
14}
五、color（文字颜色）
概念：
常用表示法：关键字、十六进制、RGB、RGBA。
color 设置文字颜色。常用表示法：关键字、十六进制、RGB、RGBA。
👇 不同颜色表示法
关键字：red
十六进制：#3498db
RGB：rgb(46, 204, 113)
RGBA（带透明度）：rgba(241, 196, 15, 0.8)
1/* 关键字 */
2color: red;
3
4/* 十六进制 */
5color: #3498db;
6color: #398; /* 简写 */
7
8/* RGB */
9color: rgb(52, 152, 219);
10
11/* RGBA（带透明度） */
12color: rgba(52, 152, 219, 0.8);
六、text-align（文本对齐）
概念：
常用值：
text-align 控制文本的水平对齐方式。常用值：
left、center、right、justify
👇 不同对齐方式
text-align: left 左对齐
text-align: center 居中
text-align: right 右对齐
text-align: justify 两端对齐，这是一段较长的文字用来演示两端对齐的效果
1/* 左对齐（默认） */
2text-align: left;
3
4/* 居中 */
5text-align: center;
6
7/* 右对齐 */
8text-align: right;
9
10/* 两端对齐 */
11text-align: justify;
七、text-decoration（文本装饰）
概念：
常用值：
text-decoration 添加下划线、删除线等装饰。常用值：
none、underline、overline、line-through
👇 不同装饰效果
text-decoration: none（无装饰）
text-decoration: underline（下划线）
text-decoration: overline（上划线）
text-decoration: line-through（删除线）
1/* 无装饰（常用于去除链接下划线） */
2text-decoration: none;
3
4/* 下划线 */
5text-decoration: underline;
6
7/* 上划线 */
8text-decoration: overline;
9
10/* 删除线 */
11text-decoration: line-through;
12
13/* 组合 */
14text-decoration: underline wavy red;