font-variant用于控制字体变体，提升排版美观性。1. 基本用法：normal为默认，small-caps将小写字母显示为小型大写，需搭配支持字体如Georgia；2. 数字样式控制：font-variant-numeric可设lining-nums（等高）、oldstyle-nums（旧式）、tabular-nums（等宽对齐）、proportional-nums（比例宽度），适用于表格或正文；3. 高级控制：font-feature-settings可启用OpenType特性如"smcp"（小型大写）和"onum"（旧式数字），适合精细调整；4. 实际建议：选用支持OpenType的字体如Lora，正文用oldstyle-nums和small-caps增强质感，避免小字号使用小型大写影响可读性，并用@supports检测兼容性以提供降级方案。合理使用font-variant能让网页文字更专业耐看。
在CSS中，font-variant 是一个用于控制文本中特殊字体变体显示的属性，合理使用它可以显著提升排版的专业性和可读性。它主要用于启用小型大写字母、数字样式和其它OpenType特性，让文字看起来更协调美观。
理解 font-variant 的基本用法
font-variant 是一个简写属性，可以控制多种字体变体。浏览器会根据当前字体是否支持这些特性来渲染效果。常见取值包括：
- normal：默认值，不应用任何特殊变体
- small-caps：将小写字母显示为小型大写字母（比常规大写字母稍小）
示例：
h2 {
font-variant: small-caps;
}
这样标题中的小写字母会以小型大写形式呈现，视觉上更优雅，适合标题或强调文本。
立即学习“前端免费学习笔记（深入）”；
使用 font-variant 数值控制数字样式
在表格、价格、统计数据等场景中，数字的对齐和高度会影响可读性。font-variant-numeric 可以精细控制数字显示方式：
- lining-nums：等高数字（现代风格）
- oldstyle-nums：旧式数字（有上下延伸，更融入正文）
- tabular-nums：等宽数字，便于表格对齐
- proportional-nums：比例宽度数字，更适合段落
示例：让表格中的数字对齐
.data-table td {
font-variant-numeric: tabular-nums;
}
这样所有数字宽度一致，列数据垂直对齐更清晰。
结合 font-feature-settings 精细化控制
对于更高级的排版需求，可以使用 font-feature-settings 直接调用OpenType特性。虽然不如 font-variant 语义清晰，但兼容某些特殊字体时更灵活。
例如启用连字（ligatures）或花体字：
p.epigraph {
font-feature-settings: "smcp", "onum"; /* 小型大写 + 旧式数字 */
}
建议优先使用 font-variant 的子属性，仅在需要微调时使用 font-feature-settings。实际应用建议
要真正发挥 font-variant 的排版优势，注意以下几点：
- 选择支持OpenType特性的字体，如 Adobe Garamond、Lora、Fira Sans 等
- 在正文段落中使用 oldstyle-nums 和 small-caps 能增强阅读质感
- 避免在小字号或移动端滥用小型大写，可能影响可读性
- 通过 @supports 检测浏览器支持情况，提供降级方案
基本上就这些。font-variant 不复杂但容易被忽略，善用它能让网页排版从“能看”变成“耐看”。
