用户指南 取消(C)

使用 OpenType 功能

  1. Adobe Fonts 用户指南
  2. 简介
    1. 系统要求和订阅要求
    2. 浏览器和操作系统支持
    3. 在计算机上添加字体
    4. 向网站添加字体
    5. 在 CC 移动应用程序上添加字体
  3. 字体许可
    1. 字体许可
    2. 管理您的帐户
    3. 向 Creative Cloud 企业版客户授予许可
    4. 将字体许可证添加到您的帐户
    5. 从订阅库中删除字体
    6. Adobe Fonts 不适用于在中国注册的 Adobe ID
    7. 我的 Creative Cloud 订阅为何不包含这些字体?
    8. Morisawa 2021 年 9 月字体删除
  4. 获取和使用字体
    1. 在 Creative Cloud 应用程序中使用 Adobe Fonts
    2. 管理您的字体
    3. 在桌面应用程序中解析缺失字体
    4. 在 InDesign 中使用字体
    5. 字体和排版规则
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 在 InCopy 中使用字体
    8. 如何在 Adobe Muse 中使用字体
    9. 在 Muse 中使用 Web 字体
    10. 打包字体文件
    11. 故障排除指南:添加字体
    12. 添加的字体未显示在字体菜单上
    13. “无法添加一种或多种字体”或“已安装同名字体”
    14. 如果字体设计合作伙伴对我正在使用的字体进行了更新,会发生什么?
  5. Web 设计和开发
    1. 向网站添加字体
    2. 故障排除指南:向网站添加字体
    3. 在 HTML 电子邮件或新闻稿中使用 Web 字体
    4. 借助移动页面加速 (AMP) 使用 Web 字体
    5. CSS 选择器
    6. 使用字体显示设置自定义 Web 字体性能
    7. 嵌入代码
    8. 动态子集和 Web 字体服务
    9. 字体事件
    10. 为什么我的 Web 字体来自 use.typekit.net?
    11. 网站无法连接到 use.typekit.net
    12. 借助 CodePen 使用 Web 字体
    13. 浏览器和操作系统支持
    14. 在本地开发时使用 Web 字体
    15. 内容安全策略
    16. 打印 Web 字体
  6. 语言支持和 OpenType 功能
    1. 语言支持和子集
    2. 使用 OpenType 功能
    3. CSS 中的 OpenType 功能的语法
  7. 字体技术
    1. OpenType-SVG 颜色字体
    2. Ten Mincho:从版本 1.000 进行更新的要点

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

更快、更轻松地获得帮助

新用户?

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上