实战场景 + 高层↔底层速查
汇总全系列：常见场景对应的属性配置，可直接套用。再附一张高层属性 ↔ 底层 OpenType tag 对照表——看清 font-variant-* 那些好记的值，底下到底对应字体里的哪个 4 字符 feature。
1 · 场景 → 配方
报表 / 价格列 / 倒计时：数字对齐
/* 数字等宽, 列对齐; 同时给零划斜杠防混淆 */
.amount { font-variant-numeric: tabular-nums slashed-zero; }
长篇正文：数字融进文字
/* 老式数字有升降部, 混在小写文字里更柔和 */
.prose { font-variant-numeric: oldstyle-nums proportional-nums; }
中英混排：自动间距
/* CJK 与拉丁 / 数字之间自动加窄空格 (新, 注意兼容性) */
.article { text-autospace: normal; }
代码块：制表符缩进收窄
pre.code { tab-size: 2; -moz-tab-size: 2; white-space: pre; }
品牌标题：开 / 关连字
/* 高层语义写法; 没有高层别名的 feature 才下沉到 font-feature-settings */
.logo { font-variant-ligatures: discretionary-ligatures; }
.tight { font-feature-settings: "liga" 0; } /* 强行关掉连字 */
2 · 高层属性 ↔ 底层 OpenType tag
| 高层 （推荐） | 底层 tag | 作用 |
|---|---|---|
| font-variant-numeric: tabular-nums | tnum |
数字等宽 |
| font-variant-numeric: proportional-nums | pnum |
数字比例宽度 |
| font-variant-numeric: lining-nums | lnum |
等高数字 |
| font-variant-numeric: oldstyle-nums | onum |
老式数字 |
| font-variant-numeric: slashed-zero | zero |
斜杠零 |
| font-variant-numeric: diagonal-fractions | frac |
斜分数 |
| font-variant-numeric: ordinal | ordn |
序数 (1st) |
| font-variant-ligatures: common-ligatures | liga |
标准连字 |
| font-variant-ligatures: discretionary-ligatures | dlig |
自由连字 |
| font-variant-caps: small-caps | smcp |
小型大写 |
| font-variant-position: super / sub | sups / subs |
上 / 下标 |
| （无高层别名） |
swsh /
|
花体 / 风格集 → 只能用 font-feature-settings |
原则：有高层用高层（可继承、可组合、语义清晰）,只有高层未覆盖的 feature 才用底层 font-feature-settings。
底层一条都是「整串覆盖」:font-feature-settings: "liga" 1, "tnum" 1; 要把想开的全写进一条——写第二条会清掉第一条。这也是为什么能用高层就别用它。
3 · 延伸：字符、字形与 font 这个「数据类型」
本系列拨的全是字形 (glyph) 开关——同一个字符，字体里可能存着好几个字形（等宽零 / 斜杠零、标准 a / 单层 a）,feature 就是在它们之间切换。想更系统地认识「字符 ≠ 字形」、以及 font 在 CSS 里作为一个数据类型怎么拆解 (family / weight / style / stretch /
feature)，看下面几个站点。
4 · 相关链接
- What is a Glyph in Typography?——fontfabric.com。讲清「字符 character vs 字形 glyph」：一个字符在字体里可有多个字形，OpenType feature 就是在这些字形间切换——本系列所有开关的底层原理。
- font — datatype（交互演示）——franktisellano.github.io。把 CSS 里的
font当成一个「数据类型」逐部件可视化拆解：family / size / weight / style 等如何共同决定最终渲染。 - CSS Type Studio · font datatype library——csstypestudio.com。font 相关属性 / 取值的速查与在线试验场，配合本系列对照各属性效果。
- font-variant-ligatures · MDN——developer.mozilla.org。连字的高层属性：common / discretionary / historical / contextual，等价底层 liga / dlig / hlig / calt。