字体变体

CSS3 的字体变体功能提供了对字体细节的精细控制能力。通过这些属性，我们可以启用或禁用字体的特定特性，调整字体的显示效果，创建更加精致和专业的排版效果。

font-variant 属性

font-variant 属性用于设置字体的小型大写字母变体。

基本语法

font-variant: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;

参数说明

• normal：正常字体（默认）
• small-caps：小型大写字母
• all-small-caps：全部小型大写字母
• petite-caps：小型花体大写字母
• all-petite-caps：全部小型花体大写字母
• unicase：混合大小写
• titling-caps：标题大写

基本用法

/* 正常字体 */
.normal-variant {
  font-variant: normal;
}

/* 小型大写字母 */
.small-caps {
  font-variant: small-caps;
}

/* 全部小型大写字母 */
.all-small-caps {
  font-variant: all-small-caps;
}

实际应用

/* 标题样式 */
h2 {
  font-variant: small-caps;
  font-weight: 700;
  color: #333;
}

/* 副标题样式 */
.subtitle {
  font-variant: all-small-caps;
  font-size: 14px;
  color: #6c757d;
}

/* 缩写样式 */
.abbreviation {
  font-variant: all-small-caps;
  font-weight: 600;
}

font-feature-settings 属性

font-feature-settings 属性用于启用或禁用 OpenType 字体特性。

基本语法

font-feature-settings: normal | <feature-tag> <value>;

常用特性

连字（Ligatures）

/* 启用连字 */
.ligatures {
  font-feature-settings: "liga" 1, "clig" 1;
}

/* 禁用连字 */
.no-ligatures {
  font-feature-settings: "liga" 0, "clig" 0;
}

数字样式

/* 表格数字 */
.tabular-nums {
  font-feature-settings: "tnum" 1;
}

/* 比例数字 */
.proportional-nums {
  font-feature-settings: "pnum" 1;
}

/* 旧式数字 */
.oldstyle-nums {
  font-feature-settings: "onum" 1;
}

/* 衬线数字 */
.lining-nums {
  font-feature-settings: "lnum" 1;
}

分数

/* 分数样式 */
.fractions {
  font-feature-settings: "frac" 1;
}

序数

/* 序数样式 */
.ordinals {
  font-feature-settings: "ordn" 1;
}

大写间距

/* 大写间距 */
.case-sensitive {
  font-feature-settings: "case" 1;
}

实际应用

/* 文章排版 */
article {
  font-feature-settings: "liga" 1, "clig" 1, "kern" 1;
}

/* 表格数字 */
table td {
  font-feature-settings: "tnum" 1;
}

/* 分数样式 */
.fraction {
  font-feature-settings: "frac" 1;
  font-size: 1.2em;
}

/* 标题样式 */
.title {
  font-feature-settings: "case" 1, "onum" 0;
  font-variant: small-caps;
}

font-kerning 属性

font-kerning 属性用于控制字体的字距调整。

基本语法

font-kerning: auto | normal | none;

参数说明

• auto：浏览器决定（默认）
• normal：启用字距调整
• none：禁用字距调整

基本用法

/* 自动字距调整 */
.auto-kerning {
  font-kerning: auto;
}

/* 启用字距调整 */
.normal-kerning {
  font-kerning: normal;
}

/* 禁用字距调整 */
.no-kerning {
  font-kerning: none;
}

实际应用

/* 标题字距调整 */
h1, h2, h3 {
  font-kerning: normal;
}

/* 代码禁用字距调整 */
code {
  font-kerning: none;
  font-family: 'Courier New', monospace;
}

/* 大标题字距调整 */
.headline {
  font-kerning: normal;
  letter-spacing: -0.02em;
}

font-variant-ligatures 属性

font-variant-ligatures 属性专门用于控制字体连字特性。

基本语法

font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;

参数说明

• normal：正常连字（默认）
• none：禁用所有连字
• common-ligatures：常用连字
• discretionary-ligatures：可选连字
• historical-ligatures：历史连字
• contextual：上下文连字

基本用法

/* 正常连字 */
.normal-ligatures {
  font-variant-ligatures: normal;
}

/* 禁用连字 */
.no-ligatures {
  font-variant-ligatures: none;
}

/* 常用连字 */
.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

/* 可选连字 */
.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

实际应用

/* 文章连字 */
article {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

/* 标题连字 */
h1, h2 {
  font-variant-ligatures: common-ligatures;
}

/* 代码禁用连字 */
code {
  font-variant-ligatures: none;
}

font-variant-caps 属性

font-variant-caps 属性专门用于控制字体的大小写变体。

基本语法

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;

参数说明

• normal：正常字体（默认）
• small-caps：小型大写字母
• all-small-caps：全部小型大写字母
• petite-caps：小型花体大写字母
• all-petite-caps：全部小型花体大写字母
• unicase：混合大小写
• titling-caps：标题大写

基本用法

/* 正常字体 */
.normal-caps {
  font-variant-caps: normal;
}

/* 小型大写字母 */
.small-caps {
  font-variant-caps: small-caps;
}

/* 全部小型大写字母 */
.all-small-caps {
  font-variant-caps: all-small-caps;
}

实际应用

/* 标题样式 */
.title {
  font-variant-caps: small-caps;
  font-weight: 700;
}

/* 缩写样式 */
.abbreviation {
  font-variant-caps: all-small-caps;
  font-weight: 600;
}

/* 副标题样式 */
.subtitle {
  font-variant-caps: petite-caps;
  font-size: 14px;
  color: #6c757d;
}

font-variant-numeric 属性

font-variant-numeric 属性用于控制数字的显示方式。

基本语法

font-variant-numeric: normal | <numeric-feature-values>;

参数说明

• normal：正常数字（默认）
• lining-nums：衬线数字
• oldstyle-nums：旧式数字
• proportional-nums：比例数字
• tabular-nums：表格数字
• diagonal-fractions：对角分数
• stacked-fractions：堆叠分数
• ordinal：序数形式
• slashed-zero：斜线零

基本用法

/* 表格数字 */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* 比例数字 */
.proportional-nums {
  font-variant-numeric: proportional-nums;
}

/* 旧式数字 */
.oldstyle-nums {
  font-variant-numeric: oldstyle-nums;
}

/* 分数样式 */
.fractions {
  font-variant-numeric: diagonal-fractions;
}

实际应用

/* 表格数字 */
table td {
  font-variant-numeric: tabular-nums;
}

/* 文章数字 */
article {
  font-variant-numeric: oldstyle-nums proportional-nums;
}

/* 分数显示 */
.fraction {
  font-variant-numeric: diagonal-fractions;
  font-size: 1.2em;
}

/* 序数显示 */
.ordinal {
  font-variant-numeric: ordinal;
}

实际应用案例

1. 文章排版

/* 文章样式 */
article {
  font-family: 'Georgia', serif;
  font-size: 18px;
  line-height: 1.8;
  font-feature-settings: "liga" 1, "clig" 1, "kern" 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

article h2 {
  font-variant-caps: small-caps;
  font-weight: 700;
  font-variant-numeric: lining-nums;
}

article .abbreviation {
  font-variant-caps: all-small-caps;
  font-weight: 600;
  font-variant-numeric: lining-nums;
}

2. 报纸风格

/* 报纸样式 */
.newspaper {
  font-family: 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "liga" 1, "clig" 1, "kern" 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

.newspaper .headline {
  font-family: 'Georgia', serif;
  font-size: 32px;
  font-weight: 700;
  font-variant-caps: small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
}

3. 数据表格

/* 数据表格样式 */
table {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  border-collapse: collapse;
}

table th {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  text-align: left;
}

table td {
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

table td:first-child {
  text-align: left;
}

4. 精美排版

/* 精美排版样式 */
.elegant {
  font-family: 'Garamond', serif;
  font-size: 20px;
  line-height: 1.8;
  font-feature-settings: "liga" 1, "clig" 1, "kern" 1, "dlig" 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
}

.elegant .title {
  font-variant-caps: small-caps;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.elegant .fraction {
  font-variant-numeric: diagonal-fractions;
  font-size: 1.1em;
}

.elegant .ordinal {
  font-variant-numeric: ordinal;
  font-weight: 600;
}

5. 标题样式

/* 标题样式 */
.title {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-variant-caps: small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.01em;
}

.subtitle {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-variant-caps: petite-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.02em;
  color: #6c757d;
}

浏览器兼容性

字体变体属性在浏览器中的支持情况：

• font-variant：Chrome 1+, Firefox 1+, Safari 1+, IE 4+
• font-feature-settings：Chrome 16+, Firefox 34+, Safari 9.1+, IE 10+
• font-kerning：Chrome 16+, Firefox 33+, Safari 9.1+, IE 10+
• font-variant-ligatures：Chrome 24+, Firefox 34+, Safari 9.1+, IE 10+
• font-variant-caps：Chrome 24+, Firefox 34+, Safari 9.1+, IE 10+
• font-variant-numeric：Chrome 24+, Firefox 34+, Safari 9.1+, IE 10+

最佳实践

1. 合理使用字体特性

/* 推荐 - 合理使用字体特性 */
article {
  font-feature-settings: "liga" 1, "clig" 1, "kern" 1;
}

/* 不推荐 - 过度使用字体特性 */
article {
  font-feature-settings: "liga" 1, "clig" 1, "dlig" 1, "hlig" 1, "calt" 1, "kern" 1, "salt" 1, "ss01" 1, "ss02" 1;
}

2. 提供降级方案

/* 推荐 - 提供降级方案 */
article {
  font-feature-settings: normal;
}

@supports (font-feature-settings: "liga" 1) {
  article {
    font-feature-settings: "liga" 1, "clig" 1, "kern" 1;
  }
}

/* 不推荐 - 不提供降级方案 */
article {
  font-feature-settings: "liga" 1, "clig" 1, "kern" 1;
}

3. 考虑性能影响

/* 推荐 - 适度的字体特性 */
article {
  font-feature-settings: "liga" 1, "kern" 1;
}

/* 不推荐 - 过多的字体特性 */
article {
  font-feature-settings: "liga" 1, "clig" 1, "dlig" 1, "hlig" 1, "calt" 1, "kern" 1, "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1;
}

4. 测试字体特性

/* 推荐 - 测试字体特性 */
.test-ligatures {
  font-feature-settings: "liga" 1;
  font-variant-ligatures: common-ligatures;
}

/* 不推荐 - 不测试字体特性 */
.text {
  font-feature-settings: "liga" 1;
}

总结

CSS3 字体变体功能提供了精细的字体控制能力：

主要属性：

• font-variant：小型大写字母
• font-feature-settings：OpenType 字体特性
• font-kerning：字距调整
• font-variant-ligatures：连字控制
• font-variant-caps：大小写变体
• font-variant-numeric：数字样式

实际应用：

• 文章排版优化
• 报纸风格设计
• 数据表格样式
• 精美排版效果
• 标题样式设计

最佳实践：

• 合理使用字体特性
• 提供降级方案
• 考虑性能影响
• 测试字体特性
• 保持代码简洁

优势：

• 提升排版质量
• 增强视觉效果
• 改善可读性
• 增加设计细节
• 支持多语言

注意事项：

• 浏览器兼容性
• 字体文件支持
• 性能影响
• 可访问性
• 版权问题

掌握 CSS3 字体变体功能，能够让我们对字体进行精细的控制，创建更加精致和专业的排版效果，大大提升网页的设计质量和用户体验。