CSS中的字体变体（font-variant）属性详解

描述
font-variant属性用于控制文本的字体变体显示，主要处理小型大写字母、数字变体等排版特性。这个属性最初只支持小型大写字母功能，但在CSS3中扩展为复合属性，可以同时控制多个字体变体特性。

基本语法和值

/* 简写形式 */
font-variant: normal;           /* 默认值 */
font-variant: small-caps;       /* 小型大写字母 */
font-variant: all-small-caps;   /* 所有字母显示为小型大写 */

/* CSS3详细控制 */
font-variant: common-ligatures slashed-zero;

详细讲解

1. 小型大写字母（small-caps）
这是font-variant最经典的功能，将小写字母转换为小型大写字母形式。

/* 示例 */
.normal { font-variant: normal; }
.small-caps { font-variant: small-caps; }

/* HTML对应 */
<p class="normal">Hello World 123</p>     /* 正常显示 */
<p class="small-caps">Hello World 123</p> /* 小型大写 */

效果说明：

• "Hello" 显示为 "H" 保持大写，"ELLO" 变为小型大写
• 数字和符号不受影响
• 原本的大写字母保持原大小

2. CSS3字体变体子属性
CSS3将font-variant扩展为多个子属性：

字体变体子属性分类：

a) 字母形式控制

/* 单个属性控制 */
font-variant-caps: normal;        /* 默认 */
font-variant-caps: small-caps;     /* 小型大写 */
font-variant-caps: all-small-caps; /* 所有字母都小型大写 */
font-variant-caps: petite-caps;    /* 更小的小型大写 */
font-variant-caps: all-petite-caps;/* 所有字母都更小小型大写 */
font-variant-caps: unicase;        /* 混合大小写 */

b) 数字形式控制

font-variant-numeric: normal;              /* 默认 */
font-variant-numeric: lining-nums;          /* 等高数字 */
font-variant-numeric: oldstyle-nums;        /* 不等高数字 */
font-variant-numeric: proportional-nums;    /* 比例宽度数字 */
font-variant-numeric: tabular-nums;         /* 等宽数字 */
font-variant-numeric: diagonal-fractions;   /* 斜线分数 */
font-variant-numeric: stacked-fractions;    /* 上下堆叠分数 */
font-variant-numeric: ordinal;              /* 序数标记 */
font-variant-numeric: slashed-zero;         /* 带斜线的零 */

c) 连字控制

font-variant-ligatures: normal;             /* 默认 */
font-variant-ligatures: common-ligatures;   /* 常用连字 */
font-variant-ligatures: no-common-ligatures;/* 禁用常用连字 */
font-variant-ligatures: discretionary-ligatures; /* 装饰性连字 */
font-variant-ligatures: historical-ligatures;    /* 历史连字 */
font-variant-ligatures: contextual;         /* 上下文连字 */

3. 实际应用示例

示例1：学术排版

.academic-text {
  font-variant: small-caps oldstyle-nums common-ligatures;
  /* 等价于 */
  font-variant-caps: small-caps;
  font-variant-numeric: oldstyle-nums;
  font-variant-ligatures: common-ligatures;
}

示例2：财务报表

.financial-report {
  font-variant: tabular-nums slashed-zero;
  /* 数字等宽对齐，零带斜线区分 */
}

示例3：禁用连字

.code-text {
  font-variant: no-common-ligatures;
  /* 在等宽字体中禁用连字，保持字符清晰 */
}

4. 浏览器兼容性考虑

渐进增强写法：

.enhanced-text {
  /* 基础支持 */
  font-variant: small-caps;
  
  /* 现代浏览器增强 */
  font-variant-caps: small-caps;
  font-variant-numeric: lining-nums;
}

/* 特性检测 */
@supports (font-variant-numeric: tabular-nums) {
  .advanced-typography {
    font-variant-numeric: tabular-nums;
    font-variant-ligatures: common-ligatures;
  }
}

5. 实用技巧和注意事项

字体支持检查：

/* 确保字体支持所需特性 */
.special-typography {
  font-family: "Source Code Pro", monospace;
  font-variant-numeric: slashed-zero tabular-nums;
}

/* 备用方案 */
.fallback-style {
  font-variant-numeric: tabular-nums;
  
  /* 如果字体不支持，提供视觉提示 */
  letter-spacing: 0.5px;
}

响应式字体变体：

/* 大屏幕使用更精细的排版 */
@media (min-width: 768px) {
  .responsive-text {
    font-variant: common-ligatures discretionary-ligatures oldstyle-nums;
  }
}

/* 小屏幕简化效果 */
@media (max-width: 767px) {
  .responsive-text {
    font-variant: common-ligatures;
  }
}

6. 常见问题解决

问题1：小型大写字母大小不一致

/* 解决方案：统一大小 */
.consistent-smallcaps {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" on; /* 备用方案 */
}

问题2：数字对齐问题

.table-numbers {
  font-variant-numeric: tabular-nums;
  /* 确保表格中数字垂直对齐 */
  font-family: monospace;
}

总结
font-variant属性是专业排版的重要工具，虽然基本的小型大写字母功能广受支持，但CSS3的扩展功能需要现代字体和浏览器的支持。在实际项目中，建议采用渐进增强策略，先确保基本功能可用，再为支持现代特性的浏览器提供更精细的排版控制。