CSS属性 font-variant-caps 使您可以控制大写字母特殊字符的使用。

如果项目的字体库中包含不同大小的大写字母特殊字符,该属性将选择其中最接近指定大小的字符。例如,如果字体中没有“特小”(petite)型大写字母,该字符将会被以“小”(small)型大写字母进行渲染。如果这些字符均不存在,浏览器将用默认大写字符集进行尺寸加工。

字体库中有时会包含无大小写的特殊字符(例如标点符号)的不同写法来适应在文本中临近的大写字母。但是,小型大写字母永远不会被用来加工无大小写的字符。

多语言规则

这一属性被用来指定各种语言特定的映射规则。例如:

  • 在突厥语系中 - 比如土耳其语(ISO 639-1代码‘tr’)、阿塞拜疆语(ISO 639-1代码‘az’)、克里米亚鞑靼语(ISO 639-3代码‘crh’)、鞑靼语(ISO 639-1代码‘tt’)和巴什基尔语(ISO 639-1代码‘ba’),有两种发音近似的“i”字母(区别在于一种有顶部的“.”,另一种没有),而它们的大小写写法也有区别:一种是i/İ,另一种是 ı/I
  • 在德语(ISO 639-1代码‘de’)中,ß 的大写可能会被写作(收录于通用字符集U+1E9E)。
  • 在希腊语(ISO 639-1代码‘el’)中,如果整个单词是大写的(ά/Α),元音将失去重音。(分离字母eta (ή/Ή)除外。)除此之外,重音在第一个元音的双元音将失去重音,并被在第二个元音上加上一个变音符(άι/ΑΪ).

句法

/* 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: 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)。大写字母变体字符通常被设计成与用于小写字母。在标题序列中,如果均使用大写字母,可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况。

正式语法

normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

示例

HTML

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

CSS

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

Result

无障碍访问风险

当大量文本信息的font-variant属性被设置为all-small-capsall-petite-caps,将会为认知障碍者(如读写障碍)的阅读带来困难。

规范

初始值normal
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar
规范 状态 说明
CSS Fonts Module Level 3
font-variant-caps
Candidate Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-variant-caps
Experimental
Chrome Full support 52Edge No support NoFirefox Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 39Safari No support NoWebView Android Full support 52Chrome Android Full support 52Firefox Android Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

文档标签和贡献者

此页面的贡献者: CapriceLi
最后编辑者: CapriceLi,