---
title: font-variant-caps
slug: Web/CSS/font-variant-caps
tags:
  - CSS
  - CSS属性
  - css字体
  - 参照
translation_of: Web/CSS/font-variant-caps
---
<div>{{CSSRef}}</div>

<p><a href="/en-US/docs/Web/CSS">CSS</a>属性 <strong><code>font-variant-caps</code></strong> 使您可以控制大写字母特殊字符的使用。</p>

<div>{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}</div>

<p class="hidden">该交互式例子的源码位于我们的Github仓库中。如果您有兴趣对交互式例子项目进行贡献，请克隆仓库<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>，并向我们提出合并请求(pull request)。</p>

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

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

<h3 id="多语言规则">多语言规则</h3>

<p>这一属性被用来指定各种语言特定的映射规则。例如：</p>

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

<h2 id="句法">句法</h2>

<pre class="brush:css no-line-numbers">/* 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;
</pre>

<p><code>font-variant-caps</code> 属性使用以下列表中的单一关键词确定。在任一使用场景中，如果字体库不支持OpenType值，则会被尺寸加工。</p>

<h3 id="可选值">可选值</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>关闭一切特殊字符变体的使用。</dd>
 <dt><code>small-caps</code></dt>
 <dd>允许小型大写字母的使用（OpenType特性：<code>smcp</code>）。小型大写字母指使用大写形式，但尺寸与对应小写字母相同的字母。</dd>
 <dt><code>all-small-caps</code></dt>
 <dd>将大小写字母全部转化为小型大写字母。（OpenType 特性: <code>c2sc</code>, <code>smcp</code>）。</dd>
 <dt><code>petite-caps</code></dt>
 <dd>允许特小型大写字母的使用（OpenType特性: <code>pcap</code>）。</dd>
 <dt><code>all-petite-caps</code></dt>
 <dd>将大小写字母全部转化为小型大写字母。（OpenType 特性: <code>c2pc</code>, <code>pcap</code>）。</dd>
 <dt><code>unicase</code></dt>
 <dd>允许将大写字母转化为小型大写字母与普通小写字母的混用 （OpenType 特性: <code>unic</code>）。</dd>
 <dt><code>titling-caps</code></dt>
 <dd>允许首字母大写（OpenType 特性: <code>titl</code>）。大写字母变体字符通常被设计成与用于小写字母。在标题序列中，如果均使用大写字母，可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况。</dd>
</dl>

<h3 id="正式语法">正式语法</h3>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p class="small-caps"&gt;Firefox rocks, small caps!&lt;/p&gt;
&lt;p class="normal"&gt;Firefox rocks, normal caps!&lt;/p&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush:css">.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}
</pre>

<h3 id="Result">Result</h3>

<p>{{ EmbedLiveSample('Examples') }}</p>

<h2 id="无障碍访问风险">无障碍访问风险</h2>

<p>当大量文本信息的<code>font-variant</code>属性被设置为<code>all-small-caps</code>或<code>all-petite-caps</code>，将会为认知障碍者（如读写障碍）的阅读带来困难。</p>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></li>
</ul>

<h2 id="规范">规范</h2>

<p>{{cssinfo}}</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">说明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<p>{{Compat("css.properties.font-variant-caps")}}</p>