字体变帽 | font-variant-caps
该font-variant-caps
CSS属性控制大写字母替代字形的使用。
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: unset;
脚本可以有不同大小的大写字母符号、普通大写字母、小大写字母和小大写字母。此属性控制要使用哪些替代符号。
如果字体中没有小大写符号,则使用小大写字体。如果不存在这些字符,浏览器将从大写字体中合成它们。请注意,一些没有情况的字符,如标点符号,可能有特殊的符号:它们的设计是为了更好地匹配周围的字符。尽管如此,合成的小大写符号从来没有为无案例特征而合成。
font-variant-caps
值考虑了特定语言的大小写映射规则,例如:
- 土耳其语(tr),阿塞拜疆语(az),克里米亚鞑靼语(crh),伏尔加鞑靼语(tt)和巴什基尔语(ba)等突厥语言,有两种
i
,分别对应:i
/İ
和ı
/I
。
- 在德语(de),
ß
是SS
的大写。
- 在希腊文(el)中,当整个单词大写(
ά
/Α
)时,元音会失去重音,除了析取的eta(ή
/Ή
)。此外,对第一个元音有重音的双元音会失去重音,并在第二个元音(άι
/ΑΪ
)上出现变音符号。
初始值 | normal |
---|---|
应用于 | all elements. It also applies to ::first-letter and ::first-line. |
是否继承 | yes |
适用的媒体 | visual |
计算值 | as specified |
动画类型 | discrete |
规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
font-variant-caps
属性是使用下面列表中的单个关键字值指定的。如果字体不支持OpenType值,则会合成字形。
取值
normal
取消激活替代字形的使用。
small-caps
启用显示小型资本(OpenType功能:)smcp
。小型字形字形通常使用大写字母的形式,但缩小为小写字母的大小。
all-small-caps
启用小写字母(大写和小写字母)的显示(OpenType功能:c2sc
,smcp
)。
petite-caps
允许显示娇小的大写(OpenType功能:)pcap
。
all-petite-caps
可以显示大小写字母(OpenType features c2pc
,pcap
)的小写字母。
unicase
使用正常小写字母(OpenType功能:)可以显示大写字母的小写字母混合unic
。
titling-caps
启用显示标题大小(OpenType功能:titl
)。大写字母字形通常设计用于小写字母。当用于所有大写字幕序列时,它们可能显得太强。标题首都是专门为这种情况而设计的。
形式语法
normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
实例
<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>
.small-caps {
font-variant-caps: small-caps;
font-style: italic;
}
.normal {
font-variant-caps: normal;
font-style: italic;
}
结果
规范
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3The definition of 'font-variant-caps' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 52.0 | 34 (34) 1 | ? | 39 | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | No support | 52.0 | 34.0 (34)1 | ? | 39 | ? | 52.0 |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com