字体变体属性
最后更新：2026-09-13
font-variant 字体变体属性
font-variant 用于设置小型大写字母（small-caps）等字体变体效果。目前主要支持 small-caps，使小写字母显示为缩小的大写形式。
| 分类 | |
|---|---|
| 初始值 | normal |
| 继承 | 是 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
font-variant: normal | small-caps;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
normal | small-caps | 关键字 | 字体变体（小型大写字母） |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-variant | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： small-caps 会保留原有的大写字母大小，仅把小写字母转为小型大写，适合英文标题。
❓ 常见问题
Q中文能用 small-caps 吗？
Asmall-caps 把小写字母渲染为小型大写字母，中文没有大小写概念，所以对汉字无效果；段落中的英文字母会受影响。若文本全是大写字母，small-caps 也不会改变大小。
Qfont-variant: small-caps 和 text-transform: uppercase 有什么区别？
Auppercase 把字母全部变成普通大写，高度与数字一致；small-caps 使用缩小的大写字形，保留原小写字母的相对高度比例，视觉更优雅，适合英文标题与首字母缩写。
Qfont-variant 现在还能做什么？
ACSS3 把 font-variant 扩展为简写，可控制连字（font-variant-ligatures）、数字形态（font-variant-numeric）等。例如 font-variant-numeric: tabular-nums 让数字等宽对齐，适合表格与价格列表。
🏷️ 相关属性
💡 相关案例
📚 相关教程
