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;
}