特性开关 · FontCover

特性开关

本页目录

开启 OpenType 特性有两套 CSS：语义化的 font-variant-* 家族，和底层的 font-feature-settings。它们最终都落到同一批四个字母的标签上，但行为不同。

语义化的一套

属性	常用值	对应标签
`font-variant-ligatures`	`no-common-ligatures`、`discretionary-ligatures`	`liga`、`dlig`
`font-variant-numeric`	`tabular-nums`、`oldstyle-nums`、`slashed-zero`、`diagonal-fractions`	`tnum`、`onum`、`zero`、`frac`
`font-variant-caps`	`small-caps`、`all-small-caps`、`petite-caps`	`smcp`、`c2sc`、`pcap`
`font-variant-position`	`sub`、`super`	`subs`、`sups`
`font-variant-east-asian`	`proportional-width`、`ruby`	`palt`、`ruby`

它们可以组合：

.table-cell {
  font-variant-numeric: tabular-nums slashed-zero;
}

.quote {
  font-variant-caps: small-caps;
}

语义化的好处：可继承、可叠加、可被后面的规则覆盖，读起来也自解释。

开关换一换。⚠️ 字体没实现某个特性时，点下去看不出变化——这本身就是这一节要讲的事：CSS 只是开关，开不出来的东西不会凭空出现。

CSS Demo: font-variant-*

.code {
  font-feature-settings: "liga" 0, "calt" 0;
}

标签必须加引号（是字符串），值 1 开、0 关。

它的问题不是语法，而是优先级：font-feature-settings 是直接指定，一旦写了，它就会覆盖由 font-variant-* 展开出来的设置。于是容易出现：

.a { font-variant-numeric: tabular-nums; }
.b { font-feature-settings: "ss01"; }   /* 继承自 .a 的 tnum 可能失效 */

同一个元素上两者都写时，以 font-feature-settings 为准。

font-kerning 是独立属性，控制字体自带的字偶距：

body {
  font-kerning: normal;   /* 默认，启用 */
}

它相当于 "kern" 的高层写法，但不要在 font-feature-settings 里再写一遍 "kern"——两者冲突时行为取决于浏览器实现，没必要赌。

“我写了 font-variant-caps: small-caps，为什么看起来是缩小的大写？”

因为字体里没有 smcp，浏览器做了合成：把大写字母按比例缩小、加粗一点。它看起来像小型大写，但笔画比例与真正的小型大写不同。

确认方法：查这个字体的 GSUB 里有没有 smcp；或者 font-synthesis: none 关掉合成，看它是否还能显示。

font-variant-* 与 font-feature-settings 在现代浏览器里都支持良好；差别在于字体有没有那些特性——CSS 只是开关，开不出来的东西不会凭空出现。