files/zh-cn/web/css/font-variant-caps/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

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