大写字母的变体:small-caps 系列
正文里夹一串大写缩写——「使用 OAUTH 登录」「支持 HTML5 与 CSS3」——整串大写字母高度突出,在正文中过于显眼。小型大写(small-caps)把它们降到约 x-height 高度、但保留大写字形,既区分专名又不打断正文节奏。font-variant-caps 就是这套字形开关:与
font-variant-numeric 同属一族,底下也对应 OpenType 的 smcp / c2sc / pcap / unic / titl 等 tag。
1 · 七个取值
| 取值 | 底层 tag | 作用 |
|---|---|---|
| small-caps | smcp |
把小写字母换成小型大写(大写字母不动) |
| all-small-caps | smcp c2sc |
大写、小写全部变小型大写,整体齐平 |
| petite-caps | pcap |
比 small-caps 更矮的「迷你大写」(高度约到 x-height 而非略高) |
| all-petite-caps | pcap c2pc |
大小写全部变迷你大写 |
| unicase | unic |
大写用正常大写、小写用小型大写,混成「单一高度」观感 |
| titling-caps | titl |
专为大字号设计的标题用大写,笔画更细、间距更舒展 |
这些值互斥(不像 numeric 可叠),一次只设一个。效果全看字体是否含对应字形——多数字体只做了 small-caps(smcp),petite / unicase / titling 常常没有。
真小型大写 vs 浏览器「合成」:字体没有 smcp 字形时,浏览器会把大写字母缩小来模拟小型大写——但笔画粗细随之变细、显得发虚,远不如字体设计师专门画的真小型大写。设置 font-synthesis: none 后,合成被禁用、退回普通大写,可以直接对比「真字形 / 合成 /
无字形」三种状态。注意:浏览器只合成 small-caps,petite-caps / unicase / titling-caps 字体没有就直接退回 normal,不合成。
别用 text-transform: uppercase 代替:那是把字符真的变成大写(可访问性树里也读成大写、可被复制成大写),且高度还是全大写那么高。font-variant-caps 只换字形,底层文本仍是原大小写——选中复制出来还是 OAuth 而不是
OAUTH。缩写、专名、run-in 小标题等语义场景应使用它。
2 · 相关链接
- font-variant-caps · MDN——developer.mozilla.org。七个取值的精确定义:small-caps / all-small-caps / petite-caps / all-petite-caps / unicase / titling-caps,以及各自等价的 OpenType tag。
- font-synthesis · MDN——developer.mozilla.org。控制浏览器是否「合成」缺失的 weight / style / small-caps;
font-synthesis: none可禁用伪小型大写,检验字体的真实能力。 - OpenType feature tag registry——learn.microsoft.com。smcp / c2sc / pcap / c2pc / unic / titl 等大写相关 feature tag 的官方定义,可在 OpenType 原始开关页用 font-feature-settings 直接拨动。