编辑“︁CSS字体变体”︁

= CSS字体变体 =

'''CSS字体变体'''（CSS Font Variants）是一组用于控制字体呈现细节的CSS属性，允许开发者调整字母数字字符的特定变体形式，如小型大写字母、数字样式、连字等。这些特性在排版精细的网页设计中尤为重要。

== 概述 ==

字体变体属性属于CSS字体模块（CSS Fonts Module Level 3），主要处理字体的'''替代字形'''和'''排版特征'''。通过以下属性实现：
* <code>font-variant</code>（简写属性）
* <code>font-variant-ligatures</code>（连字控制）
* <code>font-variant-caps</code>（大写字母变体）
* <code>font-variant-numeric</code>（数字样式）
* <code>font-variant-alternates</code>（替代字形）
* <code>font-variant-east-asian</code>（东亚文字变体）

== 主要属性详解 ==

=== font-variant-caps ===
控制大写字母的替代字形，常用值：
* <code>normal</code>：默认样式
* <code>small-caps</code>：显示小型大写字母
* <code>all-small-caps</code>：全部转为小型大写字母

<syntaxhighlight lang="css">
.example {
  font-variant-caps: small-caps;
}
</syntaxhighlight>

'''输入：'''<br>
<code>Hello World 123</code>

'''输出：'''<br>
<span style="font-variant-caps: small-caps; font-family: serif;">Hello World 123</span>

=== font-variant-numeric ===
控制数字的显示形式，常用值：
* <code>lining-nums</code>：等高数字（现代风格）
* <code>oldstyle-nums</code>：旧式数字（有升部和降部）
* <code>tabular-nums</code>：等宽数字（适合表格对齐）

<syntaxhighlight lang="css">
.price {
  font-variant-numeric: oldstyle-nums;
}
</syntaxhighlight>

'''输入：'''<br>
<code>Price: 123.45 USD</code>

'''输出：'''<br>
<span style="font-variant-numeric: oldstyle-nums; font-family: serif;">Price: 123.45 USD</span>

=== font-variant-ligatures ===
控制连字（特定字符组合的合并显示），常用值：
* <code>common-ligatures</code>：启用常规连字（如fi、fl）
* <code>no-common-ligatures</code>：禁用常规连字

<mermaid>
graph LR
  A[f + i] -->|启用连字| B[ﬁ]
  A -->|禁用连字| C[fi]
</mermaid>

== 实际应用案例 ==

=== 案例1：学术论文排版 ===
在学术文档中使用旧式数字和小型大写字母：
<syntaxhighlight lang="css">
.academic-paper {
  font-variant-caps: small-caps;
  font-variant-numeric: oldstyle-nums;
}
</syntaxhighlight>

=== 案例2：财务数据展示 ===
表格中使用等宽数字确保对齐：
<syntaxhighlight lang="css">
.financial-table td {
  font-variant-numeric: tabular-nums;
}
</syntaxhighlight>

== 浏览器支持与回退方案 ==

浏览器支持矩阵（简化版）：

{| class="wikitable"
|-
! 属性
! Chrome
! Firefox
! Safari
|-
| font-variant-caps
| 52+
| 34+
| 9.1+
|-
| font-variant-numeric
| 52+
| 34+
| 9.1+
|}

'''回退方案：'''<br>
对于不支持这些属性的旧浏览器，可使用<code>@supports</code>检测：
<syntaxhighlight lang="css">
@supports not (font-variant-caps: small-caps) {
  .fallback {
    font-size: 0.9em;
    text-transform: uppercase;
  }
}
</syntaxhighlight>

== 数学公式中的字体变体 ==

在数学表达式中，变量通常使用斜体，可通过<code>font-variant</code>调整：
<math>
E = mc^2 \quad \text{（变量 } m \text{ 使用斜体变体）}
</math>

== 高级技巧 ==

=== 组合多个变体 ===
可同时应用多个字体变体特性：
<syntaxhighlight lang="css">
.advanced {
  font-variant: small-caps oldstyle-nums common-ligatures;
}
</syntaxhighlight>

=== 可变字体中的变体 ===
现代可变字体（Variable Fonts）通过<code>font-variation-settings</code>提供更精细控制：
<syntaxhighlight lang="css">
.variable-font {
  font-variation-settings: "smcp" 1, "onum" 1;
}
</syntaxhighlight>

== 最佳实践建议 ==
1. 保持一致性：同一文档中使用相同的数字样式
2. 适度使用连字：在正文中启用，在代码展示中禁用
3. 测试跨平台表现：不同操作系统可能渲染不同
4. 结合<code>font-feature-settings</code>进行更底层控制

== 参见 ==
* [[CSS字体]]
* [[网页排版]]
* [[OpenType特性]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]