试一试
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
<section id="default-example">
<div id="example-element">
<p>Difficult waffles</p>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
当给定字体包含多种不同大小的大写字母字形时，此属性会选择最合适的字形。如果袖珍大写字母字形不可用，它们将使用小型大写字母字形渲染。如果这些也不存在，浏览器会从大写字母字形合成它们。
字体有时会为各种无大小写区分的字符（例如标点符号）包含特殊字形，以更好地匹配其周围的大写字符。但是，小型大写字母字形绝不会为无大小写区分的字符合成。
特定语言规则
此属性会考虑特定语言的大小写映射规则。例如
- 在突厥语系语言中，如土耳其语 (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 |
浏览器兼容性
加载中…