正在加载...
CSS 字体
你已经会安排文字在行里如何落位。字体决定你看到的是哪一种字母 — 字族、大小、粗细，以及是否斜体。自定义网页字体的加载在下一课；这里先掌握核心字体属性。
字体工具一览
📊 常见字体属性
| 属性 | 日常作用 |
|---|---|
font-family |
指定字族栈（外加通用回退） |
font-size |
设置文字大小 |
font-weight |
设置粗细（如 400、700、bold） |
font-style |
设置 normal 或 italic（及相关样式） |
font（简写） |
在一条声明里合并样式、字重、字号与字族 |
Font-family 栈
先写偏好字体，再写更稳妥的备选，最后以 通用字族（如 sans-serif 或 serif）结尾，保证总能画出来。
易读的无衬线栈
css
CSS Code
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}字号
font-size 设置文字大小。rem 等相对单位往往随页面更稳妥地缩放；px 以及 large 等关键字也可以。
标题与正文字号
css
CSS Code
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}字重
font-weight 控制加粗。数字字重（400、700）或关键字（normal、bold）都很常见。字面必须支持你要的字重。
用字重强调
css
CSS Code
.lead {
font-weight: 700;
}
.caption {
font-weight: 400;
}字体样式 — italic
当有斜体字面时，font-style: italic 会让文字倾斜。用于引用或轻柔强调，不要每段都用。
斜体引用
css
CSS Code
blockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}Font 简写
font 简写可同时设置样式、字重、字号和字族。在多数浏览器期望的形式里，字号与字族是必需的。
卡片标题上的 font 简写
css
CSS Code
.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}稳妥的正文习惯
为页面选一套清晰的栈，标题用稍重一些的字重或更大字号，并保持正文易读。
页面字体基线
css
CSS Code
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}自己动手
- 给
body设置以sans-serif结尾的无衬线栈。 - 给
h1更大的font-size和font-weight: 700。 - 用
font-style: italic和衬线栈设置blockquote。 - 用
font简写重写一个标题。 - 把同一段话分别用衬线与无衬线对比 — 感受气质变化。
常见错误
- 只写一个 fancy 字体名却没有回退（缺字面时会崩）
- 到处写巨大固定
px，不考虑相对单位 - 字面只有 regular/bold 却要
font-weight: 900 - 在这里就跳到
@font-face/ 托管网页字体（下一课） - 本意是 font-family 或 font-weight，却用了 text-align 或 text-decoration
小结
font-family列出栈，应以通用字族结尾font-size设置大小；相对单位往往缩放更稳妥font-weight与font-style提供加粗与斜体强调font简写打包样式、字重、字号与字族- 保持清晰的正文栈；自定义网页字体加载留给下一课
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
7
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部