font-variant-caps - CSS(层叠样式表) 编辑
CSS属性 font-variant-caps
使您可以控制大写字母特殊字符的使用。
该交互式例子的源码位于我们的Github仓库中。如果您有兴趣对交互式例子项目进行贡献,请克隆仓库https://github.com/mdn/interactive-examples,并向我们提出合并请求(pull request)。
如果项目的字体库中包含不同大小的大写字母特殊字符,该属性将选择其中最接近指定大小的字符。例如,如果字体中没有“特小”(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-caps
或all-petite-caps
,将会为认知障碍者(如读写障碍)的阅读带来困难。
规范
初始值 | normal |
---|---|
适用元素 | all elements. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | yes |
计算值 | as specified |
Animation type | discrete |
规范 | 状态 | 说明 |
---|---|---|
CSS Fonts Module Level 3 font-variant-caps | Candidate Recommendation | Initial definition |
浏览器兼容性
BCD tables only load in the browser
此页面的兼容性表格(compatibility table)是使用结构化的数据生成的。如果你愿意对此类数据进行贡献,请访问https://github.com/mdn/browser-compat-data,并向我们提出合并请求(pull request)。如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论