使用 OpenType 功能

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

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

在项目中包括 OpenType 功能

要在 Web 项目中包括字体的 OpenType 功能,请访问 Web 项目页面,然后单击该项目的“编辑”链接。在“字符集”部分中,选中“OpenType 功能”框。

选中此框时,您将看到该特定 Web 字体系列可用功能的列表,例如连字、替代字符或小写字母。 

该列表显示可在该系列的所有粗细和样式中使用的 OpenType 功能。如果某项功能仅包括在特定的粗细或样式中,则它不包括在列表中。

检查浏览器对您正在使用的功能的支持

如果浏览器不能很好地支持 font-variant 和 font-feature-settings,那么 OpenType 功能可能无法在您所有重要的环境中正常工作。

支持有着令人困惑的微妙差别。声称支持 OpenType 功能的较新版本浏览器有一些值得注意的地方,而不支持 OpenType 功能的较旧版本浏览器可能会导致错误。默认情况下,Chrome 没有启用默认应启用的功能(例如普通连字上下文替代)。masOS 和 iOS 上的 Safari 会忽略任何指定的 font-feature-settings 值,而是默认选择启用一些功能 — 并且其默认选择无法修改。某些版本的 Firefox(版本 15 及更低版本)在启用多个样式集时会遇到问题。在 Chrome 32 及更低版本中应用 OpenType 功能会使 Web 字体停止工作

-moz-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
font-feature-settings: "smcp";

当前的浏览器支持严重依赖于供应商前缀。在 CSS 中的 OpenType 功能的语法帮助文档中,您会发现代码有许多 vendor-prefixed 属性,看起来像上面的示例。

使用 CSS 借助 OpenType 功能设置文本样式

用于启用 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";
}

因此,我们将同时使用 font-variantfont-feature-settings,请记住它们是如何设计的。我们将首先在 CSS 中指定易读的 font-variant,就像上面的代码一样。

继承

因为 font-feature-setting 是一个低级属性,“在特殊情况下使用它是访问不经常使用的特定字体功能的唯一方法”,所以无论源顺序如何,它都将覆盖 font-variant。但请注意,它也会覆盖自身:

body {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum";
}

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

重新应用该属性时,所有继承的 font-feature-settings 值都将被覆盖。在上面的示例中,对于其中包含的类已同时启用小型大写字母 (smcp) 和旧体数字 (onum) 的元素,需要再次包括“onum”值 — 因此我们可以像下面这样重写声明:

.class {
  font-variant-caps: small-caps;
  font-feature-settings: "onum", "smcp";
}

编制了索引的 font-feature-settings 值

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

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

font-feature-settings: "swsh" 2;

您可能在想,我应该在这里使用什么数字?字体中有多少种不同的花饰字?这取决于字体。使用“0”表示关闭花饰字功能。使用数字索引的其他功能也是如此,例如样式替代样式集

使用多个 OpenType 功能

font-variant 属性是所有 font-variant 子属性的 CSS 简略形式。我们可以执行像这样的操作来启用普通连字和旧体数字:

.class {
  font-variant: common-ligatures, oldstyle-nums;
}

同样,可以使用带有逗号分隔值列表的 font-feature-settings 来启用多个功能:

.class {
  font-feature-settings: "liga", "onum";
}

在这两种情况下,继承的值将被完全覆盖,并且浏览器支持可能会有所不同。请记住,有时将 font-variant 值设计为一次启用多个功能(请参阅大写字母至小型大写字母)。

资源

如果您准备开始使用 CSS 进行样式设置,请将我们的常用 OpenType 功能的语法术语表添加为书签

Adobe 徽标

登录到您的帐户