font-variant-caps

**font-variant-caps** CSS 属性控制使用用于小型或精致大写字母或标题的备用字形。

试试看

当给定字体包含多种不同大小的大写字母字形时，此属性会选择最合适的字形。如果精致大写字母字形不可用，则使用小型大写字母字形进行渲染。如果这些字形不存在，则浏览器会根据大写字母字形合成它们。

字体有时会包含用于各种不区分大小写的字符（例如标点符号）的特殊字形，以更好地匹配周围的大写字符。但是，小型大写字母字形永远不会为不区分大小写的字符合成。

特定于语言的规则

此属性考虑了特定于语言的大小写映射规则。例如

  • 在土耳其语（tr）、阿塞拜疆语（az）、克里米亚鞑靼语（crh）、伏尔加鞑靼语（tt）和巴什基尔语（ba）等突厥语中，有两种 i（一种带点，一种不带点）和两种大小写配对：i/İ 和 ı/I。
  • 在德语（de）中，ß 在大写时可能变为 ẞ（U+1E9E）。
  • 在希腊语（el）中，当整个单词大写时，元音会失去重音（ά/Α），除了分离的 eta（ή/Ή）。此外，第一个元音带重音的双元音会失去重音并在第二个元音上获得变音符号（άι/ΑΪ）。

语法

css
/* Keyword values */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

/* Global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: revert;
font-variant-caps: revert-layer;
font-variant-caps: unset;

font-variant-caps 属性使用下面列表中的单个关键字值指定。在每种情况下，如果字体不支持 OpenType 值，则会合成字形。

值

normal

停用备用字形的用法。

small-caps

启用小大写字母显示（OpenType 功能：smcp）。小大写字母字形通常使用大写字母的形式，但显示大小与小写字母相同。

all-small-caps

启用大写和小写字母的小大写字母显示（OpenType 功能：c2sc、smcp）。

petite-caps

启用小型大写字母显示（OpenType 功能：pcap）。

all-petite-caps

启用大写和小写字母的小型大写字母显示（OpenType 功能：c2pc、pcap）。

unicase

启用大写字母使用小大写字母，小写字母使用正常字形的混合显示（OpenType 功能：unic）。

titling-caps

启用标题大写字母显示（OpenType 功能：titl）。大写字母字形通常设计用于与小写字母一起使用。当在所有大写标题序列中使用时，它们可能显得过于强劲。标题大写字母专门为此类情况设计。

无障碍访问

对于患有认知障碍（如阅读障碍）的人来说，使用font-variant值为all-small-caps或all-petite-caps设置的大段文本可能难以阅读。

正式定义

初始值normal
应用于所有元素和文本。它也适用于 ::first-letter 和 ::first-line。
继承是
计算值如指定
动画类型离散

正式语法

font-variant-caps = 
  normal           |
  small-caps       |
  all-small-caps   |
  petite-caps      |
  all-petite-caps  |
  unicase          |
  titling-caps

示例

设置小大写字体变体

HTML

html
<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>

CSS

css
.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}

结果

规范

规范
CSS 字体模块级别 4
# font-variant-caps-prop

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅