CSS font-variant 语法
在 CSS 中，font-variant 属性用于将英文文本设置为 “小型大写” 的方式来显示。此时所有小写字母都会转换为大写字母，但相比于原文本，转换后的文本字体会更小一些。
语法：
font-variant: 关键字;说明：
font-variant 的取值有 2 种，如下表所示。
| 取值 | 说明 |
|---|---|
| normal（默认值） | 正常 |
| small-caps | 小型大写 |
在现代 CSS 标准中，font-variant 实际上是一个简写属性，它还可以控制连字、数字样式等高级特性。但在基础开发中，我们最常用的还是 small-caps。
提示: font-variant 属性的使用频率极低，小伙伴们只需要简单了解即可，不需要深究过多。
CSS font-variant 摘要
| 属于 | CSS 字体属性 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | normal |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS font-variant 示例
接下来，我们通过几个简单的例子来讲解一下 CSS font-variant 属性是如何使用的。
示例 1：font-variant 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-child(1) { font-variant: normal; }
p:nth-child(2) { font-variant: small-caps; }
</style>
</head>
<body>
<p>绿叶网：www.lvyenet.com（normal）</p>
<p>绿叶网：www.lvyenet.com（small-caps）</p>
</body>
</html>页面效果如下图所示。
分析：
可以看到，font-variant 属性只会作用于英文文本，而不会作用于中文文本。
示例 2：与 text-transform: uppercase; 的对比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-child(1) { font-variant: small-caps; }
p:nth-child(2) { text-transform: uppercase; }
</style>
</head>
<body>
<p>绿叶网：www.lvyenet.com</p>
<p>绿叶网：www.lvyenet.com</p>
</body>
</html>页面效果如下图所示。
分析：
font-variant: small-caps; 与 text-transform: uppercase; 是完全不同的。它们之间的区别如下：
font-variant: small-caps;：是使用字体自带的 “小型大写” 字形（线条粗细与大写字母一致，只是变矮了）。text-transform: uppercase;：是直接把字母变成普通的大写字母。
