CSS 与布局 / 字体里的隐藏开关 / OpenType 原始开关:font-feature-settings 待审核 4 / 18
底层 · font-feature-settings

OpenType 原始开关:font-feature-settings

数字的对齐与字形一页里 font-variant-numeric 的各个取值,底层都对应着 OpenType 字体里一个 4 字符的 feature tagtnum / onum / zero…)。font-feature-settings 是直接拨动这些原始开关的低层接口:写 "liga" 1 开启、"liga" 0 关闭。除数字外,它还覆盖连字、上下标、风格集等多种 feature。

图 1 · 逐个勾选 feature tag 查看字形变化。勾选项被合并进同一条 font-feature-settings 声明。

1 · 高层属性 vs 底层 tag:优先用高层

font-feature-settings: "tnum" 1font-variant-numeric: tabular-nums 拨的是同一个开关,但两者并非并列:CSS Fonts 4 的「Feature and variation precedence」是一份 13 步升序列表,font-variant 及其子属性在第 10 步生效,font-feature-settings 在第 13 步,规范收尾写明「low-level font feature settings override font-variant property settings」。冲突时底层胜出,这正是「常规需求优先用高层语义属性」这条建议的机制依据。

维度 font-variant-*(高层) font-feature-settings(底层)
语义 tabular-nums 一眼可读 "tnum" 1 需查表
组合 多个值各自独立设定 一次性全覆盖,易互相清除
继承 按属性正常层叠 整串覆盖,子元素难以局部修改
能力 覆盖常用 feature,swsh / ssXX 也有出口 可开启任意 tag,含 case / cpsp 与字体私有 tag

原则:常规排版需求用 font-variant-*;只有要某个高层属性未暴露的 feature(如 casecpsp 或字体私有 tag)时,才下沉到 font-feature-settings。另有一条规范约定值得记住:字体缺某个 feature 时,文本按「该 feature 未开启」渲染,既不触发字体回退,也不做合成(font-variant-caps 的小型大写等少数显式定义的例外除外)。

警示 · 三处易踩空。其一,后一条声明完全替换前一条,要同时开启多个必须写进同一条:font-feature-settings: "liga" 1, "tnum" 1;。其二,font 简写会把 font-feature-settings 连同 font-variant-*font-variation-settingsfont-kerning 等一并重置为初始值——写一句 font: 16px/1.5 Inter 就会静默清掉前面开的所有 feature。其三,同一 feature 在合并后的列表里出现多次时,取最后一个值。

2 · 相关链接

  • font-feature-settings · MDN——developer.mozilla.org。底层 OpenType feature 开关,语法是 4 字符 tag 加一个可选整数(省略即 1,on / off 等价于 1 / 0,salt / cvXX 这类还用大于 1 的值选第几个替换字形);以及为什么应优先用 font-variant-* 高层属性。
  • OpenType Layout feature tag registry——learn.microsoft.com。全部 OpenType feature 4 字符 tag 的官方注册表:liga / dlig / smcp / onum / tnum / frac / ss01… 各自含义。