如何从继承的默认值扩展CSS font-feature-settings属性？

假设我已经为页面大部分内容设置了合适的font-feature-settings属性值，现在想在表格中添加tnum特性，确保数字对齐整齐（避免“1111”看起来比“999”窄的问题）。有没有办法不用复制修改全局设置的值，直接扩展font-feature-settings的属性值？比如通过CSS查询并编辑继承值的方式？

可行方案 #

CSS本身没有原生的“读取并编辑继承属性值”的方法，但可以通过以下几种方式实现需求：

1. 用CSS变量复用全局配置

这是最推荐的可维护方案，先将全局的字体特性配置存入CSS变量，再在表格样式中追加tnum：

/* 全局样式定义变量 */
:root {
  --global-font-features: "liga" 1, "kern" 1; /* 替换为你的实际全局配置 */
}
body {
  font-feature-settings: var(--global-font-features);
}

/* 表格样式扩展特性 */
table {
  font-feature-settings: var(--global-font-features), "tnum" 1;
}

后续修改全局配置时，只需更新--global-font-features变量，无需重复编写代码。

2. 利用inherit合并继承值（应急方案）

如果无法重构全局样式使用变量，可以直接用inherit将继承的全局配置与新特性合并：

table {
  font-feature-settings: inherit, "tnum" 1;
}

浏览器会按顺序解析特性，重复的特性会以后面的设置为准。注意部分旧浏览器可能存在兼容性问题，现代浏览器均支持该写法。

3. 语义化替代方案：font-variant-numeric

如果仅需启用表格数字对齐，推荐使用更语义化的font-variant-numeric: tabular-nums，它与font-feature-settings: "tnum" 1效果完全一致，且不会影响继承的font-feature-settings值：

table {
  font-variant-numeric: tabular-nums;
}

这种写法更符合CSS的设计理念，可读性和可维护性更强。

内容的提问来源于stack exchange，提问作者sh1