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` 控制这些特性。 示例 ```css .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