CSS3 文本样式 - font-variant 属性

核心知识点

font-variant 属性的概念

font-variant 属性用于控制字体的变体样式，最常见的是控制文本是否以小型大写字母显示。在 CSS3 中，font-variant 被扩展为一个简写属性，可以控制多个与字体变体相关的属性。

font-variant 属性的值（CSS2.1）

font-variant 属性的子属性（CSS3）

注意事项

• font-variant 属性的效果取决于字体是否支持相应的变体
• 并非所有字体都支持所有的 font-variant 子属性
• 对于不支持的变体，浏览器会回退到正常的字体显示
• font-variant 作为简写属性，可以同时设置多个子属性的值

学习目标

1. 理解 font-variant 属性的作用和不同值的效果
2. 掌握如何使用 font-variant 属性控制字体的变体样式
3. 了解 CSS3 中 font-variant 的扩展子属性
4. 能够根据不同场景选择合适的 font-variant 值

代码示例

基本用法示例（CSS2.1）

/* 示例 1: normal 值 */
.normal {
  font-variant: normal;
  font-size: 18px;
}

/* 示例 2: small-caps 值 */
.small-caps {
  font-variant: small-caps;
  font-size: 18px;
}

HTML 结构（基本用法）

<h3>normal 值：</h3>
<p class="normal">
  This is a sample text with normal font variant. 
  这是一段使用正常字体变体的示例文本。
</p>

<h3>small-caps 值：</h3>
<p class="small-caps">
  This is a sample text with small-caps font variant. 
  这是一段使用小型大写字母字体变体的示例文本。
</p>

CSS3 扩展用法示例

/* 示例 1: 控制大写字母 */
.caps-normal {
  font-variant-caps: normal;
  font-size: 18px;
}

.caps-small {
  font-variant-caps: small-caps;
  font-size: 18px;
}

.caps-all-small {
  font-variant-caps: all-small-caps;
  font-size: 18px;
}

.caps-petite {
  font-variant-caps: petite-caps;
  font-size: 18px;
}

.caps-all-petite {
  font-variant-caps: all-petite-caps;
  font-size: 18px;
}

/* 示例 2: 控制数字 */
.numeric-normal {
  font-variant-numeric: normal;
  font-size: 18px;
}

.numeric-lining {
  font-variant-numeric: lining-nums;
  font-size: 18px;
}

.numeric-oldstyle {
  font-variant-numeric: oldstyle-nums;
  font-size: 18px;
}

.numeric-proportional {
  font-variant-numeric: proportional-nums;
  font-size: 18px;
}

.numeric-tabular {
  font-variant-numeric: tabular-nums;
  font-size: 18px;
}

/* 示例 3: 控制连字 */
.ligatures-normal {
  font-variant-ligatures: normal;
  font-size: 18px;
}

.ligatures-none {
  font-variant-ligatures: none;
  font-size: 18px;
}

/* 示例 4: 简写属性 */
.variant-shorthand {
  font-variant: small-caps lining-nums proportional-nums;
  font-size: 18px;
}

HTML 结构（CSS3 扩展）

<h3>控制大写字母：</h3>
<p class="caps-normal">
  Normal caps: This is a sample text with mixed cases. 
  正常大写：这是一段包含大小写混合的示例文本。
</p>

<p class="caps-small">
  Small caps: This is a sample text with mixed cases. 
  小型大写：这是一段包含大小写混合的示例文本。
</p>

<p class="caps-all-small">
  All small caps: This is a sample text with mixed cases. 
  全部小型大写：这是一段包含大小写混合的示例文本。
</p>

<p class="caps-petite">
  Petite caps: This is a sample text with mixed cases. 
  特小型大写：这是一段包含大小写混合的示例文本。
</p>

<p class="caps-all-petite">
  All petite caps: This is a sample text with mixed cases. 
  全部特小型大写：这是一段包含大小写混合的示例文本。
</p>

<h3>控制数字：</h3>
<p class="numeric-normal">
  Normal: 0123456789
</p>

<p class="numeric-lining">
  Lining nums: 0123456789
</p>

<p class="numeric-oldstyle">
  Oldstyle nums: 0123456789
</p>

<p class="numeric-proportional">
  Proportional nums: 0123456789
</p>

<p class="numeric-tabular">
  Tabular nums: 0123456789
</p>

<h3>控制连字：</h3>
<p class="ligatures-normal">
  Normal ligatures: fi fl ff ffi ffl
</p>

<p class="ligatures-none">
  No ligatures: fi fl ff ffi ffl
</p>

<h3>简写属性：</h3>
<p class="variant-shorthand">
  Shorthand: This is a sample text with 0123456789 numbers.
  简写：这是一段包含 0123456789 数字的示例文本。
</p>

实用案例分析

案例 1: 标题样式

在标题中使用小型大写字母可以增加视觉层次感：

.section-title {
  font-variant: small-caps;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.subtitle {
  font-variant: petite-caps;
  font-size: 18px;
  color: #666;
  margin-bottom: 15px;
}

案例 2: 引用文本样式

在引用文本中使用小型大写字母可以增加正式感：

.quote {
  font-variant: small-caps;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  padding: 20px;
  background-color: #f5f5f5;
  border-left: 4px solid #333;
  margin: 20px 0;
}

.quote-author {
  font-variant: normal;
  font-style: normal;
  text-align: right;
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

案例 3: 表格数据样式

在表格中使用等宽数字可以使数据对齐更加整齐：

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
  text-align: left;
  padding: 12px;
  border: 1px solid #ccc;
}

td {
  padding: 12px;
  border: 1px solid #ccc;
}

.numeric-data {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.percent-data {
  font-variant-numeric: tabular-nums diagonal-fractions;
  text-align: right;
}

ASCII 示意图

font-variant 不同值的效果对比

+------------------+------------------------+------------------------+
| 值               | 效果                   | 适用场景               |
+------------------+------------------------+------------------------+
| normal           | 正常字体变体           | 普通文本               |
| small-caps       | 小写字母显示为小型大写 | 标题、引用、强调文本   |
| all-small-caps   | 所有字母显示为小型大写 | 标题、标语             |
| petite-caps      | 小写字母显示为特小型大写 | 小标题、副标题         |
| all-petite-caps  | 所有字母显示为特小型大写 | 小标题、副标题         |
+------------------+------------------------+------------------------+

小型大写字母效果示例

/* normal */
This is a Sample Text with Mixed Cases

/* small-caps */
THIS IS A SAMPLE TEXT WITH MIXED CASES
      (小写字母显示为缩小的大写字母)

/* all-small-caps */
THIS IS A SAMPLE TEXT WITH MIXED CASES
      (所有字母显示为缩小的大写字母)

数字变体效果示例

/* normal */
0 1 2 3 4 5 6 7 8 9

/* lining-nums */
0 1 2 3 4 5 6 7 8 9
( lining numbers - 数字对齐基线 )

/* oldstyle-nums */
0 1 2 3 4 5 6 7 8 9
( oldstyle numbers - 数字有不同的高度 )

/* proportional-nums */
0 1 2 3 4 5 6 7 8 9
( proportional numbers - 数字宽度不同 )

/* tabular-nums */
0 1 2 3 4 5 6 7 8 9
( tabular numbers - 数字宽度相同 )

实践练习

练习 1: 实现标题的小型大写字母样式

创建一个页面，包含主标题和副标题，使用 font-variant 属性为主标题应用 small-caps 样式，为副标题应用 petite-caps 样式，观察效果。

练习 2: 实现引用文本的样式

创建一个引用文本容器，使用 font-variant 属性为引用文本应用 small-caps 样式，为引用作者应用 normal 样式，添加适当的间距和边框，使引用文本更加突出。

练习 3: 实现表格数据的数字样式

创建一个包含数字数据的表格，使用 font-variant-numeric 属性为不同类型的数字数据应用合适的样式（如 tabular-nums 用于需要对齐的数字，oldstyle-nums 用于正文内的数字）。

总结

font-variant 属性是 CSS3 中控制字体变体样式的重要属性，通过设置不同的值，可以实现各种字体变体效果：

• 控制大写字母：使用 font-variant-caps 子属性，可以实现小型大写字母、特小型大写字母等效果
• 控制数字：使用 font-variant-numeric 子属性，可以实现lining数字、oldstyle数字、等宽数字等效果
• 控制连字：使用 font-variant-ligatures 子属性，可以控制连字的显示
• 简写属性：使用 font-variant 简写属性，可以同时设置多个子属性的值

合理使用 font-variant 属性，可以为文本添加独特的视觉效果，增强页面的设计感和层次感。需要注意的是，font-variant 的效果取决于字体是否支持相应的变体，并非所有字体都支持所有的变体样式。在使用时，应选择支持所需变体的字体，并提供适当的回退方案，以确保在不同浏览器和设备上都能获得良好的显示效果。