font-feature-settings

此属性使我们可以控制高级排版设置，例如小型大写字母、连字和花体字。 要激活它们，您必须在引号中声明您需要的哪个值，然后是 1 或 on 以启用。 或者，您可以使用 0 或 off 来禁用它们

.element {  
  /* these two values do the same thing */
  font-feature-settings: "liga" 1;
  font-feature-settings: "liga1" on;
}

除了标准连字外，font-feature-settings 属性还支持许多其他值，包括小型大写字母

.element {
  font-feature-settings: "smcp" 1; 
}

值

这是一个 font-feature-settings 支持的每个值的列表，但在尝试之前请确保您使用的网络字体也支持这些值

• liga: 标准连字
• dlig: 可选连字
• onum: 旧式数字
• lnum: 排列式数字
• tnum: 表格式数字
• zero: 斜线零
• frac: 分数
• sups: 上标
• subs: 下标
• smcp: 小型大写字母
• c2sc: 从大写字母生成的小写字母
• case: 区分大小写形式
• hlig: 历史连字
• calt: 上下文替换
• swsh: 花体字
• hist: 历史形式
• ss**: 风格集
• kern: 字距调整
• locl: 本地化形式
• rlig: 必需连字
• medi: 中间形式
• init: 初始形式
• isol: 孤立形式
• fina: 结尾形式
• mark: 标记
• mkmk 标记到标记定位

组合多个设置

要添加多个特性，您需要用逗号分隔的列表跟随一个值，如下所示

.element {
  font-feature-settings:"smcp" 1, "onum" 1;
}

前缀

为了在整个浏览器范围内获得最佳支持，请确保使用这些前缀

.element {
  -webkit-font-feature-settings: "smcp" 1;
  -moz-font-feature-settings:    "smcp" 1;
  -ms-font-feature-settings:     "smcp" 1;
  font-feature-settings:         "smcp" 1;
}

浏览器支持

更多信息

• Typotheque: OpenType 特性在网络浏览器中的测试
• W3C
• MDN
• Richard Rutter 的 CSS3 沙盒