CSS 中的 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. 在 Muse 中使用 Web 字体
    9. 打包字体文件
    10. 故障排除指南:添加字体
    11. 添加的字体未显示在字体菜单上
    12. “无法添加一种或多种字体”或“已安装同名字体”
    13. 如果字体设计合作伙伴对我正在使用的字体进行了更新,会发生什么?
  5. Web 设计和开发
    1. 向网站添加字体
    2. 故障排除指南:向网站添加字体
    3. 对字体问题进行故障诊断
    4. 在 HTML 电子邮件或新闻稿中使用 Web 字体
    5. 借助移动页面加速 (AMP) 使用 Web 字体
    6. CSS 选择器
    7. 使用字体显示设置自定义 Web 字体性能
    8. 嵌入代码
    9. 动态子集和 Web 字体服务
    10. 字体事件
    11. 为什么我的 Web 字体来自 use.typekit.net?
    12. 网站无法连接到 use.typekit.net
    13. 借助 CodePen 使用 Web 字体
    14. 浏览器和操作系统支持
    15. 在本地开发时使用 Web 字体
    16. 内容安全策略
    17. 打印 Web 字体
  6. 语言支持和 OpenType 功能
    1. 语言支持和子集
    2. 使用 OpenType 功能
    3. CSS 中的 OpenType 功能的语法
  7. 字体技术
    1. OpenType-SVG 颜色字体
    2. Ten Mincho:从版本 1.000 进行更新的要点

我们将在此页介绍各个 OpenType 功能,并提供每个功能的具体示例。有关如何在 Web 项目中启用 OpenType 功能以及如何在 CSS 中使用这些功能的更广泛概述,请参阅我们有关在 CSS 中使用 OpenType 功能的帮助文档。

普通/标准连字 (liga)

实际应用中的连字示例,在 Warnock Pro 中设置。

应用 liga CSS 的示例

此功能用一种字形(称为连字)替换一系列字形,首选用于排版目的。启用后,此功能将插入设计者/制造商判断在正常情况下应使用的连字。

连字功能默认已启用,这意味着您无需编写任何 CSS,它即可正常工作,但在 Chrome 中默认未启用该功能。此外,无法在 Safari(Mac 或 iOS)中禁用它。某些版本的 Chrome 和 Firefox 在包含空格的连字上会遇到麻烦。

.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

要使用 font-variant 属性或 font-variant-ligatures 子属性来启用它,请使用值 common-ligatures,它会激活普通连字和上下文连字。像上下文替代一样,上下文连字具有内置的条件逻辑,仅在特定情况下才应用替换字形。要使用 font-feature-settings 获得相同的效果,请同时使用“liga”和“clig”功能标签。另请参阅:使用多个 OpenType 功能的语法

.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
}

要禁用此功能,请使用 no-common-ligatures 值以及为 font-feature-settings 使用零数字索引。

上下文替代 (calt)

实际应用中的上下文替代示例,在 Caflisch Script Pro 中设置。

应用 calt CSS 的示例

在特定情况下,此功能将使用替换形式替换默认字形,以提供更好的连接行为。像连字一样(尽管不是严格的连字功能),上下文替代通常用于使字形的形状与周围的上下文协调一致。

上下文替代功能默认已启用,这意味着您无需编写任何 CSS,它即可正常工作,但在 Chrome 中默认未启用该功能。此外,无法在 Safari(Mac 或 iOS)中禁用它。

.class {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

要使用 font-variant 属性或 font-variant-ligatures 子属性来启用它,请使用值 contextual。要使用 font-feature-settings 获得相同的效果,请使用“calt”功能标签。

.class {
    font-variant-ligatures: no-contextual;
    -moz-font-feature-settings: "calt" 0;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
}

要禁用此功能,请使用 no-contextual 值以及为 font-feature-settings 使用零数字索引。

自由连字 (dlig)

实际应用中的自由连字示例,在 Warnock Pro 中设置。

应用 dlig CSS 的示例

此功能用一种字形(连字)替换一系列字形,首选用于排版目的。启用后,此功能插入那些连字,从而可用于实现特殊效果。

.class {
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

自由连字功能默认已禁用

要使用 font-variant 属性或 font-variant-ligatures 子属性来启用它,请使用值 discretionary-ligatures。要使用 font-feature-settings 获得相同的效果,请使用“dlig”功能标签。

小型大写字母 (smcp)

实际应用中的小型大写字母示例,在 Warnock Pro 中设置。

应用 smcp CSS 的示例

此功能将小写字符转换成小型大写字母。

.class {
  font-variant-caps: small-caps;
  -moz-font-feature-settings: "smcp";
  -webkit-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
}

小型大写字母功能默认已禁用

要使用 font-variant 属性或 font-variant-caps 子属性来启用它,请使用值 small-caps。 要使用 font-feature-settings 获得相同的效果,请使用“smcp”功能标签。

请注意,在某些字体中,小型大写字母功能可能还包括其他形式。根据 OpenType 规范,smcp OpenType 功能“可能包括与小型大写字母有关的形式,例如旧体数字。”

大写字母至小型大写字母 (c2sc)

实际应用中的大写字母至小型大写字母示例,在 Warnock Pro 中设置。

应用 c2sc CSS 的示例

此功能可将大写字符转换成小型大写字母。

.class {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}

大写字母转换至小型大写字母功能默认已禁用

要使用 font-variant 属性或 font-variant-caps 子属性来启用它,请使用值 all-small-caps,这会将大写和小写字符都变成小型大写字母。这种行为有意义,因为您很少希望仅将大写字符转换成小型大写字母。要使用 font-feature-settings 获得相同的效果,请同时使用“c2sc”和“smcp”功能标签。另请参阅:使用多个 OpenType 功能的语法

花饰字 (swsh)

实际应用中的花饰字示例,在 Bickham Script Pro 3 中设置。

应用 swsh CSS 的示例

此功能用相应的花饰字字形替换默认字符字形。

.class {
  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh";
}

花饰字功能默认已禁用

要使用 font-feature-settings 启用它,请使用“swsh”功能标签。请注意,对于给定的字符,可能会有不止一个花饰字替代。要访问备用花饰字,请为值添加数字索引:

.class {
  -moz-font-feature-settings: "swsh" 2;
  -webkit-font-feature-settings: "swsh" 2;
  font-feature-settings: "swsh" 2;
}

如果字体中存在第二个可用的花饰字,则会激活它。您可能已经猜到,就像在我们的第一个代码示例中一样,使用值“swsh”等效于使用值“swsh” 1。

现在,我们先跳过 font-variant 属性,因为其“指定”值(例如 swash (flowing))通过 font-feature-value CSS 定义映射到数字花饰字索引,所有主流浏览器均尚不支持此功能。

样式替代 (salt)

实际应用中的花饰字示例,在 Bree 中设置。

应用 salt CSS 的示例

此功能用样式化替代来替换默认字符字形。另请参阅:样式集 (ss##)

.class {
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}

样式化替代功能默认已禁用

要使用 font-feature-settings 启用它,请使用“salt”功能标签。请注意,对于给定的字符,可能会有不止一个样式化替代。要访问其他样式化替代,请为值添加数字索引:

.class {
  -moz-font-feature-settings: "salt" 2;
  -webkit-font-feature-settings: "salt" 2;
  font-feature-settings: "salt" 2;
}

如果字体中存在第二个可用的样式化替代,则会激活它。您可能已经猜到,就像在我们的第一个代码示例中一样,使用值“salt”等效于使用值“salt”1。

现在,我们先跳过 font-variant 属性,因为其“指定”值(它没有好的例子)通过 font-feature-value CSS 定义映射到数字样式化替代索引,所有主流浏览器均尚不支持此功能。

齐线数字 (lnum)

实际应用中的齐线数字示例,在 Warnock Pro 中设置。

应用 lnum CSS 的示例

此功能将数字字形从默认或旧体数字更改为齐线数字。请注意,某些字体可能包含齐线数字作为它们的默认数字样式,在这种情况下,启用此功能可能不会影响字形的样式。

.class {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

齐线数字功能默认已禁用

要使用 font-variant 属性或 font-variant-numeric 子属性来启用它,请使用值 lining-nums。 要使用 font-feature-settings 获得相同的效果,请使用“lnum”功能标签。

旧体数字 (onum)

实际应用中的旧体数字示例,在 Warnock Pro 中设置。

应用 onum CSS 的示例

此功能将数字字形从默认或齐线数字更改为旧体数字。请注意,某些字体可能包含旧体数字作为它们的默认数字样式,在这种情况下,启用此功能可能不会影响字形的样式。

.class {
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

旧体数字功能默认已禁用

要使用 font-variant 属性或 font-variant-numeric 子属性来启用它,请使用值 oldstyle-nums。 要使用 font-feature-settings 获得相同的效果,请使用“onum”功能标签。

比例数字 (pnum)

实际应用中的比例数字示例,在 Hypatia Sans Pro 中设置。

应用 pnum CSS 的示例

此功能将设置为统一(表格)宽度的数字字形替换为设置在字形特定(比例)宽度的相应字形。请注意,某些字体可能默认包含比例数字,在这种情况下,启用此功能可能不会影响字形的宽度。

.class {
  font-variant-numeric: proportional-nums;
  -moz-font-feature-settings: "pnum";
  -webkit-font-feature-settings: "pnum";
  font-feature-settings: "pnum";
}

比例数字功能默认已禁用

要使用 font-variant 属性或 font-variant-numeric 子属性来启用它,请使用值 proportional-nums。 要使用 font-feature-settings 获得相同的效果,请使用“pnum”功能标签。

表格数字 (tnum)

实际应用中的表格数字示例,在 Hypatia Sans Pro 中设置。

应用 tnum CSS 的示例

此功能将设置为字形特定(比例)宽度的数字字形替换为设置在统一(表格)宽度的相应字形。请注意,某些字体可能默认包含表格数字,在这种情况下,启用此功能可能不会影响字形的宽度。

.class {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

表格数字功能默认已禁用

要使用 font-variant 属性或 font-variant-numeric 子属性来启用它,请使用值 tabular-nums。 要使用 font-feature-settings 获得相同的效果,请使用“tnum”功能标签。

分数 (frac)

实际应用中的分数示例,在 Warnock Pro 中设置。

应用 frac CSS 的示例

此功能将用斜杠分隔的数字替换为普通(斜线)分数。

.class {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}

分数功能默认已禁用

要使用 font-variant 属性或 font-variant-numeric 子属性来启用它,请使用值 diagonal-fractions。 要使用 font-feature-settings 获得相同的效果,请使用“frac”功能标签。

序数 (ordn)

实际应用中的序数示例,在 Warnock Pro 中设置。

应用 ordn CSS 的示例

此功能用相应的序数形式替换默认的字母字形,用于数字之后。

.class {
  font-variant-numeric: ordinal;
  -moz-font-feature-settings: "ordn";
  -webkit-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
}

序数功能默认已禁用

要使用 font-variant 属性或 font-variant-numeric 子属性来启用它,请使用值 ordinal。 要使用 font-feature-settings 获得相同的效果,请使用“ordn”功能标签。

请注意,并非所有字形替换都在数字之后发生。根据 OpenType 规范,“跟随数字规则的一个例外是数字字符 (U+2116),它实际上是连字替代,但最好通过此功能进行访问。”

样式集 (ss##)

实际应用中的样式集示例,在 Hypatia Sans Pro 中设置。

应用样式集 CSS 的示例

此功能用文体变体来替换默认字符字形集。样式集中的字形可以设计为在视觉上协调,以特定方式交互或以其他方式协同工作。另请参阅:样式替代 (salt),旨在提供各个字形的样式替代方案。

.class {
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

样式集功能默认已禁用

要使用 font-feature-settings 来启用它,请使用“ss##”功能标签,其中“##”是 01 到 20 之间的任何两位数字。请注意,字体以完全任意和自定义的方式采用样式集。例如,两种不同的字体可能使用相同的功能(如 ss01)来替换完全不同的字形集;或者,特定字体可能使用 ss01 和 ss03 替换字形集,而忽略 ss02。一些字体公司提供有关如何组织功能的文档。

现在,我们先跳过 font-variant 属性,因为其“指定”值(例如 styleset(sharp-serifs))通过 font-feature-value CSS 定义映射到数字样式集索引,所有主流浏览器均尚不支持此功能。

比例宽度 (pwid)

实际应用中的比例宽度示例,在 Kozuka Mincho Pr6n 中设置:

应用 pwid CSS 的示例

此功能用按比例隔开的字形替换设置在统一宽度(通常为全 em 或半 em)的字形。比例变体通常用于 CJKV 字体中的拉丁字符,但也可用于日文字体中的假名。(源代码。)

.class {
  font-variant-east-asian: proportional-width;
  -moz-font-feature-settings: "pwid";
  -webkit-font-feature-settings: "pwid";
  font-feature-settings: "pwid";
}

比例宽度功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。要使用 font-variant 属性或 font-variant-east-asian 子属性来启用它,请使用值 proportional-width。要使用 font-feature-settings 获得相同的效果,请使用“pwid”功能标签。

比例替代宽度 (palt)

实际应用中的比例替代宽度示例,在 Source Han Sans 中设置:

应用 palt CSS 的示例

此功能重新分隔设计用于设置为全 em 宽度的字形,使它们适合于各个(或多或少成比例的)水平宽度。此功能与 pwid 的不同之处在于,它不替代新字形(GPOS,非 GSUB 功能)。用户可能更喜欢等宽形式,或者可能只是想确保字形非常适合并且不会在垂直位置旋转(按比例间隔设计的拉丁形式会旋转)。(源代码。)

.class {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

比例替代宽度功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“palt”功能标签。

比例假名 (pkna)

实际应用中的比例假名示例,在 Kozuka Mincho Pr6n 中设置:

应用 pkna CSS 的示例

此功能用成比例的字形替换设置在统一宽度(半宽或全宽)的假名和假名相关字形。它类似于比例宽度功能,但仅影响假名。(源代码。)

.class {
  -moz-font-feature-settings: "pkna";
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
}

比例假名功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“pkna”功能标签。

全宽 (fwid)

实际应用中的全宽示例,在 Kozuka Mincho Pr6n 中设置:

应用 fwid CSS 的示例

此功能用设置为全(通常为 em)宽度的字形替换设置在其他宽度的字形。在 CJKV 字体中,这可能包括“低位 ASCII”拉丁字符和各种符号。在欧洲字体中,此功能将按比例隔开的字形替换为等宽字形,这些字形通常设置为 0.6 em 的宽度。(源代码。)

.class {
  font-variant-east-asian: full-width;
  -moz-font-feature-settings: "fwid";
  -webkit-font-feature-settings: "fwid";
  font-feature-settings: "fwid";
}

全宽功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。要使用 font-variant 属性或 font-variant-east-asian 子属性来启用它,请使用值 full-width。要使用 font-feature-settings 获得相同的效果,请使用“fwid”功能标签。

半宽 (hwid)

实际应用中的半宽示例,在 Kozuka Mincho Pr6n 中设置:

应用 hwid CSS 的示例

此功能用半 em (en) 宽度的字形替换比例宽度或固定宽度(半 em 以外的宽度)的字形。许多 CJKV 字体都有设置为多种宽度的字形;此功能选择半 em 版本。在各种情况下,这都是首选行为,包括为了与较旧的桌面文档兼容的情况下。(源代码。)

.class {
  -moz-font-feature-settings: "hwid";
  -webkit-font-feature-settings: "hwid";
  font-feature-settings: "hwid";
}

半宽功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“hwid”功能标签。

替代半宽 (halt)

实际应用中的替代半宽示例,在 Kozuka Mincho Pr6n 中设置:

应用 halt CSS 的示例

此功能重新分隔设计用于设置为全 em 宽度的字形,使它们适合于半 em 宽度。此功能与 hwid 的不同之处在于,它不替代新字形。(源代码。)

.class {
  -moz-font-feature-settings: "halt";
  -webkit-font-feature-settings: "halt";
  font-feature-settings: "halt";
}

替代半宽功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“halt”功能标签。

三分之一宽度 (twid)

实际应用中的三分之一宽度示例,在 Kozuka Mincho Pr6n 中设置:

应用 twid CSS 的示例

此功能用设置为 em 的三分之一宽度的字形替换其他宽度的字形。涉及的字符通常是数字和标点符号的一些形式。(源代码。)

.class {
  -moz-font-feature-settings: "twid";
  -webkit-font-feature-settings: "twid";
  font-feature-settings: "twid";
}

三分之一宽度功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“twid”功能标签。

四分之一宽度 (qwid)

实际应用中的四分之一宽度示例,在 Kozuka Mincho Pr6n 中设置:

应用 qwid CSS 的示例

此功能用设置为 em(en 的一半)的四分之一宽度的字形替换其他宽度的字形。涉及的字符通常是数字和标点符号的一些形式。(源代码。)

.class {
  -moz-font-feature-settings: "qwid";
  -webkit-font-feature-settings: "qwid";
  font-feature-settings: "qwid";
}

四分之一宽度功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“qwid”功能标签。

JIS78 形式 (jp78)

实际应用中的 JIS78 形式示例,在 Kozuka Mincho Pr6n 中设置:

应用 jp78 CSS 的示例

此功能用 JIS C 6226-1978 (JIS78) 规范中的相应形式替换默认 (JIS90) 日语字形。(源代码。)

.class {
  font-variant-east-asian: jis78;
  -moz-font-feature-settings: "jp78";
  -webkit-font-feature-settings: "jp78";
  font-feature-settings: "jp78";
}

JIS78 形式功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。要使用 font-variant 属性或 font-variant-east-asian 子属性来启用它,请使用值 jis78。要使用 font-feature-settings 获得相同的效果,请使用“jp78”功能标签。

JIS83 形式 (jp83)

实际应用中的 JIS83 形式示例,在 Kozuka Mincho Pr6n 中设置:

应用 jp83 CSS 的示例

此功能用 JIS X 0208-1983 (JIS83) 规范中的相应形式替换默认 (JIS90) 日语字形。(源代码。)

.class {
  font-variant-east-asian: jis83;
  -moz-font-feature-settings: "jp83";
  -webkit-font-feature-settings: "jp83";
  font-feature-settings: "jp83";
}

JIS83 形式功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。要使用 font-variant 属性或 font-variant-east-asian 子属性来启用它,请使用值 jis83。要使用 font-feature-settings 获得相同的效果,请使用“jp83”功能标签。

JIS90 形式 (jp90)

实际应用中的 JIS90 形式示例,在 Kozuka Mincho Pr6n 中设置:

应用 jp90 CSS 的示例

此功能用 JIS X 0208-1990 (JIS90) 规范中的相应形式替换 JIS78 或 JIS83 规范中的日语字形。(源代码。)

.class {
  font-variant-east-asian: jis90;
  -moz-font-feature-settings: "jp90";
  -webkit-font-feature-settings: "jp90";
  font-feature-settings: "jp90";
}

JIS90 形式功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。要使用 font-variant 属性或 font-variant-east-asian 子属性来启用它,请使用值 jis90。要使用 font-feature-settings 获得相同的效果,请使用“jp90”功能标签。

JIS2004 形式 (jp04)

实际应用中的 JIS2004 形式示例,在 Kozuka Mincho Pro 中设置:

应用 jp04 CSS 的示例

日本的国家语言委员会 (NLC) 为许多 JIS 字符定义了新的字形形状,这些字符已作为新的原型形式并入 JIS X 0213:2004。“jp04”功能是“nlck”功能的子集,用于以一种保持 JIS X 0213:2004 完整性的方式访问这些原型字形。(源代码。)

.class {
  font-variant-east-asian: jis04;
  -moz-font-feature-settings: "jp04";
  -webkit-font-feature-settings: "jp04";
  font-feature-settings: "jp04";
}

JIS2004 形式功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。要使用 font-variant 属性或 font-variant-east-asian 子属性来启用它,请使用值 jis04。要使用 font-feature-settings 获得相同的效果,请使用“jp04”功能标签。

繁体形式 (trad)

实际应用中的繁体形式示例,在 Kozuka Mincho Pr6n 中设置:

应用 trad CSS 的示例

将“简体”中文汉字或日语汉字形式替换为相应的“繁体”形式。(源代码。)

.class {
  font-variant-east-asian: traditional;
  -moz-font-feature-settings: "trad";
  -webkit-font-feature-settings: "trad";
  font-feature-settings: "trad";
}

繁体形式功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。要使用 font-variant 属性或 font-variant-east-asian 子属性来启用它,请使用值 traditional。要使用 font-feature-settings 获得相同的效果,请使用“trad”功能标签。

旁注标记形式 (ruby)

实际应用中的旁注标记形式示例,在 Kozuka Mincho Pr6n 中设置:

应用 ruby CSS 的示例

日语排版通常使用较小的假名字形(通常为上标形式),以阐明读者可能不熟悉的汉字的含义。从旧的四点字型排版术语开始,它们就被称为 ruby。此功能可识别字体中为此目的而设计的字形,并用它们来替换默认设计。(源代码。)

.class {
  font-variant-east-asian: ruby;
  -moz-font-feature-settings: "ruby";
  -webkit-font-feature-settings: "ruby";
  font-feature-settings: "ruby";
}

旁注标记形式功能默认已禁用。要使用 font-variant 属性或 font-variant-east-asian 子属性来启用它,请使用值 ruby。要使用 font-feature-settings 获得相同的效果,请使用“ruby”功能标签。

请注意上面的代码示例中我们正在设置样式的 rt 元素。W3C 的 HTML5 规范中有关文本级语义的部分说明了旁注文字的正确标记。还要注意,旁注文字的位置和大小在不同的浏览器/版本中会有所不同;考虑使用重置样式表功能禁用浏览器默认设置,并手动调整旁注文字的大小/位置。

水平片假名替代 (hkna)

实际应用中的水平片假名替代示例,在 Kozuka Mincho Pr6n 中设置:

应用 hkna CSS 的示例

此功能用专门为仅水平书写而设计的形式替换标准假名。这是版式优化,可提高适合度以及使颜色更均匀。(源代码。)

.class {
  -moz-font-feature-settings: "hkna";
  -webkit-font-feature-settings: "hkna";
  font-feature-settings: "hkna";
}

水平片假名替代功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“hkna”功能标签。

NLC 日文汉字形式 (nlck)

实际应用中的 NLC 汉字形式示例,在 Kozuka Mincho Pr6n 中设置:

应用 nlck CSS 的示例

日本的国家语言委员会 (NLC) 于 2000 年为许多 JIS 字符定义了新的字形形状。“nlck”功能用于访问这些字形。(源代码。)

.class {
  -moz-font-feature-settings: "nlck";
  -webkit-font-feature-settings: "nlck";
  font-feature-settings: "nlck";
}

NLC 汉字形式功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“nlck”功能标签。

替代批注形式 (nalt)

实际应用中的替代批注形式示例,在 Kozuka Mincho Pr6n 中设置:

应用 nalt CSS 的示例

此功能用各种符号标注形式(例如,放在空心或实心圆、正方形、括号、菱形或圆形框中的字形)替换默认字形。在某些情况下,符号标注形式可能已经存在,但用户可能希望使用另一种形式。(源代码。)

.class {
  -moz-font-feature-settings: "nalt";
  -webkit-font-feature-settings: "nalt";
  font-feature-settings: "nalt";
}

符号标注形式功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“nalt”功能标签。

斜体 (ital)

实际应用中的斜体示例,在 Kozuka Mincho Pr6n 中设置:

应用 ital CSS 的示例

某些字体(例如 Adobe 的 Pro Japanese 字体)在单个字体中会同时具有某些字符的罗马和斜体形式。此功能用相应的斜体字形替换罗马字形。(源代码。)

.class {
  -moz-font-feature-settings: "ital";
  -webkit-font-feature-settings: "ital";
  font-feature-settings: "ital";
}

斜体功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“ital”功能标签。

注意:关于垂直功能

以下 OpenType 功能可通过重新设置间距和替换字形来帮助垂直方向的文本更好地显示。但是,浏览器对垂直方向的支持有限。因此,虽然浏览器可能会支持这些 OT 功能且能正常工作,但如果垂直方向也不受支持且无法正常工作…嗯,这些功能就无关紧要。

.class {
  direction: rtl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

我们在这里的代码基于 W3C 的 CSS 书写模式 3 级编者草案,以及基于 David Storey 的出色研究。您可以看到它是如何形成的……但是目前浏览器尚不支持。我们测试了上面的代码,并且书写模式仅在 Chrome 中有效。

垂直字距调整 (vkrn)

此功能调整字形之间的间距,通常可在字形之间提供光学上一致的间距。尽管设计良好的字体总体上具有一致的字形间距,但某些字形组合需要进行调整以提高易读性。除了在垂直方向上的标准调整外,此功能还可以通过设备表提供尺寸相关的字距调整数据,在 X 文字方向上的“交叉流”字距调整以及与提前调整无关的字形投放调整。请注意,此功能可能适用于两个以上字形的运行,并且不适用于等宽字体。另请注意,此功能仅适用于垂直设置的文字。(源代码。)

.class {
  -moz-font-feature-settings: "vkrn", "vpal";
  -webkit-font-feature-settings: "vkrn", "vpal";
  font-feature-settings: "vkrn", "vpal";
}

垂直字距调整功能默认已禁用,并且在 IE 中或 Mac OS 或 iOS 上的任何 Safari 版本中均不受支持。而且,尽管在 Firefox 中可能支持此功能,但不支持垂直文本,因此实际上不受支持。启用它的唯一方法是使用 font-feature-settings 和“vkrn”功能标签。如果激活了 vkrn,则 vpal 也必须激活(如果存在)。另请参阅:使用多个 OpenType 功能的语法注意:关于垂直功能

垂直替代 (vert)

在垂直书写模式下,此功能用为垂直书写而调整的变体替换默认形式。尽管大多数 CJKV 字形在设置为垂直书写模式时仍保持垂直,但有些字形为此采用不同的形式(通常是旋转并重新定位)。此功能涵盖的字形与在低端 DTP 应用程序中通常旋转的字形相对应。(源代码。)

垂直替代功能默认已启用,这意味着您无需编写任何 CSS,它即可正常工作,但在 IE 或 Firefox 的所有版本中默认未启用该功能。此外,根本无法在 Safari(Mac 或 iOS)中启用它。另请参阅:注意:关于垂直功能

.class {
  -moz-font-feature-settings: "vert";
  -webkit-font-feature-settings: "vert";
  font-feature-settings: "vert";
}

启用垂直替代功能的唯一方法是使用 font-feature-settings 和“vert”功能标签。

等比替代垂直量度 (vpal)

此功能重新分隔设计用于设置为全 em 高度的字形,使它们适合于各个(或多或少成比例的)垂直高度。此功能与 valt 的不同之处在于,它不替代新字形(GPOS,非 GSUB 功能)。用户可能更喜欢等距形式,或者可能只是想确保字形非常适合。(源代码。)

.class {
  -moz-font-feature-settings: "vpal";
  -webkit-font-feature-settings: "vpal";
  font-feature-settings: "vpal";
}

等比替代垂直量度功能默认已禁用,并且在 IE 中或 Mac OS 或 iOS 上的任何 Safari 版本中均不受支持。而且,尽管在 Firefox 中可能支持此功能,但不支持垂直文本,因此实际上不受支持。启用它的唯一方法是使用 font-feature-settings 和“vpal”功能标签。另请参阅:注意:关于垂直功能

替代垂直半角量度 (vhal)

此功能重新分隔设计用于设置为全 em 高度的字形,使它们适合于半 em 高度。(源代码。)

.class {
  -moz-font-feature-settings: "vhal";
  -webkit-font-feature-settings: "vhal";
  font-feature-settings: "vhal";
}

替代垂直半角量度功能默认已禁用,并且在 Mac OS 或 iOS 上的任何 IE、Firefox 或 Safari 版本中均不受支持。启用它的唯一方法是使用 font-feature-settings 和“vhal”功能标签。另请参阅:注意:关于垂直功能

垂直假名替代 (vkna)

此功能用专门为仅垂直书写而设计的形式替换标准假名。这是版式优化,可提高适合度以及使颜色更均匀。另请参阅 hkna。(源代码。)

.class {
  -moz-font-feature-settings: "vkna";
  -webkit-font-feature-settings: "vkna";
  font-feature-settings: "vkna";
}

垂直片假名替代功能默认已禁用,并且 Mac OS 或 iOS 上的任何 Safari 版本均不受支持。启用它的唯一方法是使用 font-feature-settings 和“vkna”功能标签。另请参阅:注意:关于垂直功能

字距调整 (kern)

实际应用中的字距调整示例,在 Source Sans Pro 中设置。

应用 kern CSS 的示例

此功能调整字形之间的间距,通常可在字形之间提供光学上一致的间距。尽管设计良好的字体总体上具有一致的字形间距,但某些字形组合需要进行调整以提高易读性。请注意,此功能可能适用于两个以上字形的运行,并且不适用于等宽字体。另请注意,此功能不适用于垂直设置的文字。(源代码。)

.class {
  font-kerning: normal;
  -moz-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

字距调整功能默认已禁用,但是在许多情况下务必启用它。

要使用 font-kerning 属性启用它,请使用值 normal。要使用 font-feature-settings 获得相同的效果,请使用“kern”功能标签。

字形合成/分解 (ccmp)

实际应用中的字形合成/分解示例,在日语思源黑体中设置:

应用 ccmp CSS 的示例

为了尽量减少字形替代的数量,有时需要将一个字符分解为两个字形。另外,为更好地处理字形,最好将两个字符组成成一个字形。此功能可实现这种合成/分解。该功能应作为要处理的第一个功能进行处理,并且仅应在调用该功能时进行处理。(源代码。)

字形合成/分解功能默认已启用,这意味着您无需编写任何 CSS,它即可正常工作,但要确保它启用有一些棘手的情况。Chrome 或 Safari 中默认未启用此功能,但是使用任何 font-feature-settings 值可启用它。

.class {
  -moz-font-feature-settings: "ccmp";
  -webkit-font-feature-settings: "ccmp";
  font-feature-settings: "ccmp";
}

要确保字形合成/分解功能已启用,请显式使用“ccmp”功能标签,或使用任何其他 font-feature-settings 值。

本地化形式 (locl)

许多用于在广泛的地理区域书写多种语言的文字已经开发出特定字母的本地化变体形式,个别文学团体会使用这些变体形式。例如,保加利亚语和塞尔维亚语字母表中的许多字母具有与俄罗斯字母不同的形式以及彼此不同的形式。在某些情况下,本地化形式与“规范”文字仅稍有不同,在其他情况下,形式则完全不同。此功能使字形的本地化形式可以替代默认形式。(源代码。)

本地化形式功能默认已启用,这意味着您无需编写任何 CSS,它即可正常工作,但实际上它仅在 Firefox 中默认启用,而在 Safari(Mac 或 iOS)或 Android 中根本不受支持。

.class {
  -moz-font-feature-settings: "locl";
  -webkit-font-feature-settings: "locl";
  font-feature-settings: "locl";
}

为确保已启用本地化形式功能,请显式使用“locl”功能标签。

上标 (sups)

实际应用中的上标示例,在 Hypatia Sans Pro 中设置。

应用 sups CSS 的示例

此功能用上标数字替换齐线或旧体数字(主要用于脚注指示),以及用上标字母替换小写字母(主要用于缩写的法文标题)。

.class {
  font-variant-position: super;
  -moz-font-feature-settings: "sups";
  -webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}

上标功能默认已禁用

要使用 font-variant 属性或 font-variant-position 子属性来启用它,请使用值 super。 要使用 font-feature-settings 获得相同的效果,请使用“sups”功能标签。

下标 (subs)

实际应用中的下标示例,在 Warnock Pro 中设置。

应用 subs CSS 的示例

此功能可能用下标字形替换默认字形,也可能将字形替换与定位调整相结合,实现适当放置。

.class {
  font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
}

下标功能默认已禁用

要使用 font-variant 属性或 font-variant-position 子属性来启用它,请使用值 sub。 要使用 font-feature-settings 获得相同的效果,请使用“subs”功能标签。

更快、更轻松地获得帮助

新用户?