CSS font-variant 字体变体
CSS font-variant属性详解：small-caps小型大写字母、numeric数字变体（lining/oldstyle）、ligatures连字控制、east-asian东亚字体变体 · 难度：入门 · +10XP
CSS font-variant —— 字体变体与高级排版
你见过那种"全是大写但首字母更大"的文字效果吗？那就是小型大写字母（Small Caps）。font-variant 属性就是控制这类字体变体的。
小型大写字母 —— small-caps
.heading {
font-variant: small-caps; /* 所有小写字母变成缩小版的大写字母 */
}效果：正常文字中 "HELLO" 和 "hello" 大小差异很大。用 small-caps 后，"hello" 显示为缩小版的大写字母，视觉上更统一优雅。适合用于标题、作者名、缩写等。
数字变体 —— font-variant-numeric
.financial-table {
font-variant-numeric: tabular-nums; /* 等宽数字：每列完美对齐 */
}
.design-text {
font-variant-numeric: oldstyle-nums; /* 老式数字：有升有降，像字母 */
}
.fraction {
font-variant-numeric: diagonal-fractions; /* 斜分数：1/2 → ½ */
}
数字样式对比
| 值 | 效果 | 适用场景 |
|---|---|---|
| lining-nums | 等高数字（都在基线上） | 默认样式 |
| oldstyle-nums | 老式数字（3 5 7 9 下沉） | 书籍、优雅排版 |
| tabular-nums | 等宽数字（1和8宽度相同） | 表格、财务数据 |
| proportional-nums | 比例数字（1比0窄） | 正文段落 |
动手练习
- 基础练习：做一个标题用small-caps的效果页面，对比普通大写、小型大写、普通小写的视觉差异。
- 进阶应用：制作一个财务数据表格（金额、增长率等），用tabular-nums让所有数字完美对齐，用oldstyle-nums给封面文字增加书籍感。
- 项目实战：给你博客的正文启用common-ligatures连字（如fi→fi），让阅读体验接近专业印刷排版。
接下来学什么？
下一课学习 滚动驱动动画——让动画跟随页面滚动播放，告别复杂的JS监听。