CSS中的font-variant-numeric属性详解

描述
font-variant-numeric属性用于控制数字、分数和序号标记等数字相关字符的替代字形显示。这个属性在需要精确控制数字排版时特别有用，比如在财务报表、学术论文或需要特定数字风格的场景中。

详细讲解

1. 基本概念
font-variant-numeric控制的是OpenType字体中的数字替代特性。不是所有字体都支持这些特性，通常等宽字体或专业排版字体会提供更丰富的数字字形变体。

2. 属性值详解

2.1 普通数字控制

• normal：默认值，使用字体的默认数字样式
• lining-nums：使用等高数字（位于基线上，高度一致）
• oldstyle-nums：使用旧式数字（有升部和降部，类似小写字母）

.example {
    font-variant-numeric: lining-nums;  /* 123 */
    /* 或者 */
    font-variant-numeric: oldstyle-nums; /* 123（有升降部） */
}

2.2 数字宽度控制

• proportional-nums：比例宽度数字（宽度不等）
• tabular-nums：表格宽度数字（等宽，便于对齐）

.table-numbers {
    font-variant-numeric: tabular-nums; /* 适合表格数据对齐 */
}
.proportional-numbers {
    font-variant-numeric: proportional-nums; /* 适合正文排版 */
}

2.3 分数显示

• diagonal-fractions：对角线分数（如 ½）
• stacked-fractions：堆叠分数（垂直排列）

.fractions {
    font-variant-numeric: diagonal-fractions; /* 显示为 ¾ */
}

2.4 其他数值符号

• ordinal：序号标记（如1st、2nd中的上标）
• slashed-zero：带斜杠的零（区别于字母O）

3. 组合使用
多个值可以用空格分隔组合使用：

.advanced-typography {
    font-variant-numeric: oldstyle-nums proportional-nums diagonal-fractions ordinal slashed-zero;
}

4. 实际应用示例

4.1 财务报表排版

.financial-report {
    font-variant-numeric: tabular-nums lining-nums;
    /* 等宽数字便于金额对齐，等高数字便于阅读 */
}

4.2 学术论文排版

.academic-paper {
    font-variant-numeric: oldstyle-nums proportional-nums diagonal-fractions;
    /* 旧式数字更优雅，比例数字更自然，对角线分数更紧凑 */
}

5. 浏览器兼容性考虑

5.1 特性检测

@supports (font-variant-numeric: tabular-nums) {
    .modern-typography {
        font-variant-numeric: tabular-nums;
    }
}

5.2 渐进增强

.typography {
    font-feature-settings: "tnum"; /* 旧版语法备用 */
    font-variant-numeric: tabular-nums; /* 现代语法 */
}

6. 注意事项

• 需要字体支持相应的OpenType特性
• 不同浏览器对某些值的支持程度可能不同
• 可以与其他OpenType特性配合使用
• 在响应式设计中要考虑数字排版的可读性

这个属性虽然使用频率不高，但在需要精细控制数字排版的场景中非常实用，能够显著提升页面的专业性和可读性。