← 字体里的隐藏开关 / 大写字母的变体:small-caps 系列 待审核 7 / 18
大写 · font-variant-caps

大写字母的变体: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-capspetite-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 直接拨动。