OpenType 功能就像字体中的密室。解锁它们,您将找到使字体以微妙而生动的方式呈现不同外观和行为的方法。并非所有 OpenType 功能都适合在所有时候使用,但是某些功能对于出色的排版至关重要。

要在项目中使用字体的 OpenType 功能,您需要将其包括在 Web 项目中,然后使用所需的 CSS 设置文本样式。查看我们的 语法指南 中有关每个功能的示例,以及可复制并粘贴到 CSS 中的代码。

用于启用 OpenType 功能的 CSS 语法 仍在不断发展。您需要知道的是,既有高级属性又有低级属性 — 继承属性十分棘手。

通过供应商前缀在浏览器中某种程度上支持低级 CSS font-feature-settings 属性,但是由于两个原因,使用起来很麻烦。首先,它依靠难以记住的四字符 OpenType 功能标签。其次,所有功能标签都在单个属性中指定,这可能会很麻烦。请参阅 特定 OpenType 功能的语法 使用多个 OpenType 功能的语法

高级 CSS font-variant 属性及其子属性非常出色,因为它们采用“small-caps”和“diagonal-fractions”等自然语言值。W3C 希望我们尽可能使用它们,但是浏览器不支持。尽管如此,适应这种语法也是一个好主意。

.class { font-variant-caps: small-caps; font-feature-settings: "smcp"; /* disables onum from body declaration */

一些 font-feature-settings 值稍微复杂一些。在示例中,到目前为止,每个值都是一个字符串(或逗号分隔的字符串集)。是否存在诸如“onum”和“smcp”之类的功能标签就像一个二进制选择 — 功能打开或关闭。

这就说得通了。但是,如果一种字体包含两种不同 花饰字 版本的大写字母“A”字符,该怎么办?在这种情况下,我们不只是要启用花饰字,而是要启用花饰字并选择特定的花饰字。因此,我们可以在字符串后面为该值添加一个数字索引: