CSS Fonts（字体）

CSS 的字体相关属性用于控制文字用哪种字体、多大、多粗、是否斜体等，是排版的基础。

常用字体属性一览

属性	作用
font-family	字体族（字体名称）
font-size	字号
font-weight	字重（粗细）
font-style	斜体等
font-variant	小型大写等
line-height	行高（常与字体一起设）
font	简写

---

1. font-family（字体族）

指定元素内文字使用的字体。可以写多个字体名，浏览器会按顺序选用第一个本机存在的字体。

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.article {
  font-family: Georgia, "Times New Roman", serif;
}

.code {
  font-family: "Consolas", "Monaco", monospace;
}

书写要点：

• 字体名中有空格或特殊字符时，用英文双引号包起来，如 "Microsoft YaHei"。
• 最后通常放一个通用字体族作兜底：
  • serif — 衬线
  • sans-serif — 无衬线
  • monospace — 等宽（代码常用）
  • cursive、fantasy — 草书、装饰

常见中文字体："Microsoft YaHei"（微软雅黑）、"PingFang SC"（苹方）、"SimSun"（宋体）等。

---

2. font-size（字号）

设置文字大小。

body {
  font-size: 16px;   /* 常用：像素 */
}

.small {
  font-size: 14px;
}

.large {
  font-size: 1.25rem;  /* 相对根元素 html 的字号 */
}

.relative {
  font-size: 1.2em;    /* 相对当前元素继承的字号 */
}

单位简述：

• px：像素，直观，但不利于整体缩放。
• rem：相对根元素（html）的 font-size，改根字号即可整体缩放，推荐用于布局。
• em：相对当前元素继承的字号，会层层相乘，需注意。
• %：相对父元素字号。

---

3. font-weight（字重）

控制粗细。数值 100–900，或关键字。

.normal {
  font-weight: normal;   /* 400 */
}

.bold {
  font-weight: bold;     /* 700 */
}

.light {
  font-weight: 300;      /* 需字体支持 */
}

常见：normal(400)、bold(700)。中间档（如 300、500、600）要字体本身有对应字重才有明显效果。

---

4. font-style（样式）

常用是控制是否斜体。

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;    /* 斜体 */
}

.oblique {
  font-style: oblique;   /* 倾斜（无斜体时用倾斜模拟） */
}

---

5. font-variant（变体）

例如把英文显示成小型大写（小写字母变成小号的大写形式）。

.small-caps {
  font-variant: small-caps;
}

---

6. line-height（行高）

常和字体一起设置，控制行距。

p {
  font-size: 16px;
  line-height: 1.6;   /* 无单位，相对当前字号 */
}

---

7. font 简写

把 font-style、font-variant、font-weight、font-size、line-height、font-family 写在一行。

p {
  font: 16px/1.6 "Microsoft YaHei", sans-serif;
}

.title {
  font: bold 24px/1.2 Georgia, serif;
}

注意：简写时 font-size 和 font-family 是必写的，否则整条规则可能无效。其他可省略，用默认值。

---

使用 Web 字体（@font-face）

若要用「本机没有」的字体，可先通过 @font-face 引入字体文件，再在 font-family 中使用。

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

body {
  font-family: "MyFont", sans-serif;
}

---

小结

• 字体：font-family，多写几个备选，最后加通用族。
• 大小：font-size（px / rem 常用）；粗细：font-weight；斜体：font-style。
• 行高：line-height；简写：font（必须包含 font-size 和 font-family）。
• 自定义字体用 @font-face 引入后再用 font-family 引用。

下一节学习 CSS 链接（link）：为超链接设置样式和不同状态。