CSS font-variant-alternates 属性

CSS font-variant-alternates 属性用于指定字体的替代形式或字符集。

语法

font-variant-alternates: [style] [variant...] [feature-value-name...];

• style：可选值为 normal、italic 或 oblique，指定字体的样式。
• variant：可选值为 normal、small-caps 或 all-small-caps，指定字体的变体。
• feature-value-name：可选的 OpenType 特性名称列表，指定替代字符集或 OpenType 特性。

类型

该属性属于可选属性，并且可以继承。该属性适用于所有文本元素。

值

常见的值如下：

• normal：默认值，没有替代字符集或 OpenType 特性。
• small-caps：使用小型大写字母替换正常字母。
• all-small-caps：使用小型大写字母替换所有字母。
• stylistic([n])：使用指定编号 n 的 Stylistic Set 字符替代文本。
• swash([n])：使用指定编号 n 的 Swash 字符替代文本。
• ornaments([n])：使用指定编号 n 的 Ornaments 字符替代文本。
• historical-forms：使用历史形式替代文本。
• styleset([n])：使用指定编号 n 的 Style Set 字符替代文本。
• character-variant([n])：使用指定编号 n 的 Character Variant 字符替代文本。
• ruby：使用 Ruby 字体替代文本。

示例

以下代码演示了在页面上使用不同的字体替代形式：

/* 使用 small-caps 替换字体中的正常字母 */
p {
  font-family: "Open Sans";
  font-size: 16px;
  font-variant-alternates: small-caps;
}

/* 将历史形式应用于 h1 元素 */
h1 {
  font-family: "Lora";
  font-size: 32px;
  font-variant-alternates: historical-forms;
}

/* 显示引用时使用 Ornaments 字符 */
blockquote p {
  font-family: "EB Garamond";
  font-size: 18px;
  font-variant-alternates: ornaments(1);
}

浏览器支持

这个属性在所有现代浏览器中得到支持，并且 IE 和 Opera 支持较旧的版本。

总结

CSS font-variant-alternates 属性提供了一种简单的方法来指定字体的替代形式或字符集。使用此属性，您可以改变字体的样式和变体，以及选择应用于特定文本的替代字符集或 OpenType 特性。该属性在所有现代浏览器中都得到了支持，因此没必要考虑浏览器兼容性问题。