CSS Font Feature Settings

深入理解 CSS 字体特性设置:OpenType 特性、连字(ligatures)、数字样式(oldstyle、tabular)、以及如何用 CSS 控制字体的高级排版特性。

CSS Font Feature Settings

字体特性的重要性

现代 OpenType 字体支持丰富的排版特性:连字(ligatures)、数字样式、字距调整(kerning)、小型大写字母等。CSS 提供了访问这些特性的属性。

面试定位:这不是高频面试考点,但展示了前端工程师对字体排版的理解。


font-feature-settings

常用 OpenType 特性

.features {
  /* 连字 */
  font-feature-settings: "liga" 1;  /* 标准连字 */
  font-feature-settings: "dlig" 1;  /* 选择性连字 */
  font-feature-settings: "calt" 1;  /* 上下文连字 */

  /* 数字 */
  font-feature-settings: "onum" 1;  /* 旧式数字 */
  font-feature-settings: "tnum" 1;  /* 等宽数字 */
  font-feature-settings: "lnum" 1;  /* 行内数字 */

  /* 字距 */
  font-feature-settings: "kern" 1;  /* 字距调整 */

  /* 小型大写 */
  font-feature-settings: "smcp" 1;  /* 小型大写 */
  font-feature-settings: "c2sc" 1;  /* 全大写转小型大写 */
}

现代替代写法

.features-modern {
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums tabular-nums;
  font-variant-caps: small-caps;
  font-kerning: auto;
}

延展阅读