font-variant-caps

在此页

句法
可访问性关注
形式定义
形式句法
范例
规范
浏览器兼容性
相关话题

font-variant-caps CSS property controls the use of alternate glyphs for capital letters.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

When a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. If petite capital glyphs are not available, they are rendered using small capital glyphs. If these are not present, the browser synthesizes them from the uppercase glyphs.

Fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. However, small capital glyphs are never synthesized for caseless characters.

Language-specific rules

This property accounts for language-specific case mapping rules. For example:

In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i (one with the dot, one without) and two case pairings: i / İ and ı / I .
In German (de), the ß may become ẞ (U+1E9E) in uppercase.
In Greek (el), vowels lose their accent when the whole word is in uppercase ( ά / Α ), except for the disjunctive eta ( ή / Ή ). Also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel ( άι / ΑΪ ).

句法

/* 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 property is specified using a single keyword value from the list below. In each case, if the font doesn't support the OpenType value, then it synthesizes the glyphs.

值

normal
small-caps: Enables display of small capitals (OpenType feature: smcp ). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.
all-small-caps: Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc , smcp ).
petite-caps: Enables display of petite capitals (OpenType feature: pcap ).
all-petite-caps: Enables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc , pcap ).
unicase: Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic ).
titling-caps: Enables display of titling capitals (OpenType feature: titl ). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.

可访问性关注

Large sections of text set with a font-variant value of all-small-caps or all-petite-caps may be difficult for people with cognitive concerns such as Dyslexia to read.

形式定义

初始值	`normal`
适用于	所有元素。它还适用于 `::first-letter` and `::first-line` .
继承	yes
计算值	如指定
动画类型	discrete

形式句法

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

范例

Setting the small-caps font variant

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;
}

结果

规范

规范	状态	注释
CSS Fonts Module Level 3 The definition of 'font-variant-caps' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`font-variant-caps`	Chrome 完整支持 52	Edge 完整支持 79	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 39	Safari 不支持 No	WebView Android 完整支持 52	Chrome Android 完整支持 52	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 41	Safari iOS 不支持 No	Samsung Internet Android 完整支持 6.0

图例

完整支持
不支持
用户必须明确启用此特征。

元数据

最后修改： 2020 年 7 月 17 日

CSS
CSS 参考
CSS 字体
指南
1. OpenType font features guide
2. Variable fonts guide
At-Rules
1. @font-face
2. @font-feature-values
特性

在此页