OpenType 特性：font-variant 与 font-feature-settings 实战

---

title: OpenType 特性：font-variant 与 font-feature-settings 实战

keywords:

• font-variant
• font-feature-settings
• OpenType 特性
• 连字
• 数字样式

description: 介绍 OpenType 字体特性的控制方式，使用 font-variant 与 font-feature-settings 启用连字、数字样式等，提升排版品质并给出兼容建议。

categories:

• 文章资讯
• 技术教程

---

概述

OpenType 字体包含丰富的排版特性（连字、旧式数字、小型大写等）。CSS 提供语义化的 font-variant 以及底层的 font-feature-settings 控制这些特性。

示例

.ligature { font-variant-ligatures: common-ligatures discretionary-ligatures }
.oldstyle { font-variant-numeric: oldstyle-nums }
.smallcaps { font-variant-caps: small-caps }
.feature { font-feature-settings: "liga" on, "lnum" on }

工程建议

• 语义优先：优先使用 font-variant-*；在不支持的情况下使用 font-feature-settings。
• 可读性与语言：针对语言与内容选择合适特性；避免对代码与数字影响可读性。
• 兼容：测试字体支持矩阵；为不支持的字体提供回退。

参考与验证

• MDN font-variant 文档：https://developer.mozilla.org/docs/Web/CSS/font-variant
• MDN font-feature-settings 文档：https://developer.mozilla.org/docs/Web/CSS/font-feature-settings