From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/font-variant-caps/index.html | 133 +++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 files/zh-cn/web/css/font-variant-caps/index.html (limited to 'files/zh-cn/web/css/font-variant-caps/index.html') diff --git a/files/zh-cn/web/css/font-variant-caps/index.html b/files/zh-cn/web/css/font-variant-caps/index.html new file mode 100644 index 0000000000..12b0fa5ecb --- /dev/null +++ b/files/zh-cn/web/css/font-variant-caps/index.html @@ -0,0 +1,133 @@ +--- +title: font-variant-caps +slug: Web/CSS/font-variant-caps +tags: + - CSS + - CSS属性 + - css字体 + - 参照 +translation_of: Web/CSS/font-variant-caps +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}
+ + + +

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

+ +

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

+ +

多语言规则

+ +

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

+ + + +

句法

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

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

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

+ +

{{ EmbedLiveSample('Examples') }}

+ +

无障碍访问风险

+ +

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

+ + + +

规范

+ +

{{cssinfo}}

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-variant-caps")}}

-- cgit v1.2.3-54-g00ecf