解锁排印之力：深入探索 CSS 字体特性值与 OpenType

在网页设计领域，排版（typography）通常是用户体验中默默无闻的英雄。我们精心选择字体家族、字重和大小，以打造清晰且美观的界面。但我们能否更进一步呢？我们日常使用的字体文件是否隐藏着实现更丰富、更具表现力、更专业排版的秘密？事实是，它们确实有。这些秘密被称为OpenType特性，而CSS为我们提供了开启它们的钥匙。

长久以来，印刷设计师所享有的精细控制——例如真正的小型大写字母、优雅的自由连字以及根据上下文变化的数字样式——在网页上似乎遥不可及。如今，情况已不再如此。这篇综合指南将带您进入CSS字体特性值的世界，探索如何驾驭您网络字体的全部力量，以创造真正精致且易读的数字体验。

究竟什么是 OpenType 特性？

在深入探讨CSS之前，我们必须先理解我们正在控制的是什么。OpenType是一种字体格式，除了字母、数字和符号的基本形状外，它还可以包含大量数据。在这些数据中，字体设计师可以嵌入各种称为“特性”（features）的可选功能。

您可以将这些特性想象成内置的指令或备选的字符设计（字形），它们可以通过编程方式开启或关闭。它们不是黑科技或浏览器技巧，而是创造该字体的排印设计师有意为之的设计选择。当您激活一个OpenType特性时，您是在请求浏览器使用字体设计中专为特定目的而设的某个部分。

这些特性的范围可以从纯粹功能性的（例如通过改善间距来提高可读性）到纯粹美学性的（例如为标题添加装饰性花边）。

CSS 网关：高层属性与底层控制

CSS 提供了两种主要方式来访问 OpenType 特性。现代且首选的方法是使用一组高层的、语义化的属性。然而，当您需要最大程度的控制时，也有一个底层的、功能强大的“万能”属性。

首选方法：高层属性

现代 CSS 在 `font-variant` 旗下提供了一系列属性，以及 `font-kerning`。这些被认为是最佳实践，因为它们的名称清晰地描述了其用途，使您的代码更具可读性和可维护性。

• font-kerning: 控制字体中存储的字偶距信息的使用。
• font-variant-ligatures: 控制常用、自由、历史和上下文连字。
• font-variant-numeric: 控制数字、分数和带斜线零的不同样式。
• font-variant-caps: 控制大写字母的变体，例如小型大写字母。
• font-variant-alternates: 提供对样式替换和字符变体的访问。

这些属性的主要优点是，您告诉浏览器您想实现什么（例如 `font-variant-caps: small-caps;`），然后浏览器会找出最佳的实现方式。如果某个特定特性不可用，浏览器可以优雅地处理。

强力工具：`font-feature-settings`

虽然高层属性很棒，但它们并未涵盖所有可用的 OpenType 特性。为了实现完全控制，我们有底层的 `font-feature-settings` 属性。它通常被描述为最后的手段，但它是一个极其强大的工具。

其语法如下：

font-feature-settings: "" , "" ;

• 特性标签 (Feature Tag): 一个区分大小写的四字符字符串，用于标识一个特定的 OpenType 特性（例如 `"liga"`、`"smcp"`、`"ss01"`）。
• 值 (Value): 通常是一个整数。对于许多特性，`1` 表示“开启”，`0` 表示“关闭”。某些特性，如样式集，可以接受其他整数值来选择特定的变体。

黄金法则： 始终优先尝试使用高层的 `font-variant-*` 属性。如果您需要的特性无法通过它们访问，或者您需要以高层属性不允许的方式组合特性，那么再使用 `font-feature-settings`。

常见 OpenType 特性实践之旅

让我们来探索一些您可以用 CSS 控制的最有用和最有趣的 OpenType 特性。对于每一种，我们将介绍其用途、4字符标签以及启用它的 CSS 写法。

类别 1：连字 - 优雅地连接字符

连字是特殊的字形，它将两个或多个字符组合成一个单一、更和谐的形状。它们对于防止尴尬的字符碰撞和改善文本流畅度至关重要。

标准连字

• 标签: `liga`
• 用途: 用于将常见的、有问题的字符组合（如 `fi`、`fl`、`ff`、`ffi` 和 `ffl`）替换为单个专门设计的字形。这是许多字体中提高可读性的基本特性。
• 高层 CSS: `font-variant-ligatures: common-ligatures;` (在浏览器中通常默认开启)
• 底层 CSS: `font-feature-settings: "liga" 1;`

自由连字

• 标签: `dlig`
• 用途: 这些是更具装饰性和风格化的连字，例如用于 `ct`、`st` 或 `sp` 等组合。它们对可读性并非必需，应有选择地使用，通常用在标题或标志中，以增添一丝优雅。
• 高层 CSS: `font-variant-ligatures: discretionary-ligatures;`
• 底层 CSS: `font-feature-settings: "dlig" 1;`

类别 2：数字 - 为不同任务选择合适的数字

并非所有数字都生而平等。一个好的字体会为不同上下文提供不同样式的数字，而控制它们是专业排版的标志。

旧式数字 vs. 等高数字

• 标签: `onum` (旧式), `lnum` (等高)
• 用途: 等高数字 是我们随处可见的标准数字——高度统一，与大写字母对齐。它们非常适合需要垂直对齐数字的表格、图表和用户界面。相比之下，旧式数字 具有不同的高度，有升部和降部，很像小写字母。这使它们能无缝地融入文本段落，而不会过分引人注目。
• 高层 CSS: `font-variant-numeric: oldstyle-nums;` 或 `font-variant-numeric: lining-nums;`
• 底层 CSS: `font-feature-settings: "onum" 1;` 或 `font-feature-settings: "lnum" 1;`

比例宽度数字 vs. 等宽数字

• 标签: `pnum` (比例宽度), `tnum` (等宽)
• 用途: 这控制了数字的宽度。等宽数字 是等宽的——每个数字占据完全相同的水平空间。这对于财务报告、代码或任何需要不同行中的数字在列中完美对齐的数据表至关重要。比例宽度数字 的宽度是可变的；例如，数字 '1' 占用的空间比数字 '8' 少。这创造了更均匀的间距，非常适合在连续文本中使用。
• 高层 CSS: `font-variant-numeric: proportional-nums;` 或 `font-variant-numeric: tabular-nums;`
• 底层 CSS: `font-feature-settings: "pnum" 1;` 或 `font-feature-settings: "tnum" 1;`

分数和带斜线的零

• 标签: `frac` (分数), `zero` (带斜线的零)
• 用途: `frac` 特性能将像 `1/2` 这样的文本优美地格式化为真正的斜角分数字形 (½)。`zero` 特性用带斜线或点的版本替换标准的 '0'，以明确区分其与大写字母 'O'，这在技术文档、序列号和代码中至关重要。
• 高层 CSS: `font-variant-numeric: diagonal-fractions;` 和 `font-variant-numeric: slashed-zero;`
• 底层 CSS: `font-feature-settings: "frac" 1, "zero" 1;`

类别 3：字偶距 - 间距的艺术

字偶距

• 标签: `kern`
• 用途: 字偶距是调整个别字母对之间间距以改善视觉效果和可读性的过程。例如，在组合“AV”中，V 会被稍微收进 A 的下方。大多数高质量字体包含数百或数千个这样的字偶距对。虽然它几乎总是默认启用，但您可以控制它。
• 高层 CSS: `font-kerning: normal;` (默认) 或 `font-kerning: none;`
• 底层 CSS: `font-feature-settings: "kern" 1;` (开) 或 `font-feature-settings: "kern" 0;` (关)

类别 4：大小写变体 - 超越大小写

小型大写字母

• 标签: `smcp` (来自小写), `c2sc` (来自大写)
• 用途: 此特性启用真正的小型大写字母，它们是专门设计的字形，高度与小写字母相同，但形式上是大写字母。它们远优于通过简单缩小全尺寸大写字母创建的“伪”小型大写字母。可用于缩写词、副标题或强调。
• 高层 CSS: `font-variant-caps: small-caps;`
• 底层 CSS: `font-feature-settings: "smcp" 1;`

类别 5：样式替换 - 设计师的点睛之笔

这是排版真正变得富有表现力的地方。许多字体都带有字符的备用版本，您可以换入以改变文本的基调或风格。

样式集

• 标签: `ss01` 至 `ss20`
• 用途: 这是最令人兴奋的特性之一，但它只能通过 `font-feature-settings` 访问。字体设计师可以将相关的样式替换分组到集合中。例如，`ss01` 可能会激活单层 'a'，`ss02` 可能会改变 'y' 的尾巴，而 `ss03` 可能会提供一套更具几何感的标点符号。可能性完全取决于字体设计师。
• 底层 CSS: `font-feature-settings: "ss01" 1;` 或 `font-feature-settings: "ss01" 1, "ss05" 1;`

花饰

• 标签: `swsh`
• 用途: 花饰是添加到字符上的装饰性、华丽的笔画，通常在单词的开头或结尾。它们在手写体和展示字体中很常见，应非常谨慎地使用以获得最大效果，例如用于首字下沉或标志中的单个单词。
• 底层 CSS: `font-feature-settings: "swsh" 1;`

如何发现字体中可用的特性

这一切都很棒，但您如何知道您选择的字体实际支持哪些特性呢？一个特性只有在字体设计师将其构建到字体文件中时才会起作用。以下是几种找出答案的方法：

1. 字体服务示例页面： 大多数信誉良好的字体铸造厂和服务（如 Adobe Fonts、Google Fonts 和商业字体铸造厂）都会在字体的主页上列出并演示支持的 OpenType 特性。这通常是最简单的起点。
2. 浏览器开发者工具： 现代浏览器为此配备了出色的工具。在 Chrome 或 Firefox 中，检查一个元素，转到“计算样式”选项卡，然后一直滚动到底部。您会找到一个“渲染的字体”部分，它会告诉您正在使用哪个字体文件。在 Firefox 中，有一个专门的“字体”选项卡，它会明确列出所选元素字体的每个可用的 OpenType 特性标签。这是实时探索字体功能的极其强大的方式。
3. 桌面字体分析工具： 对于本地安装的字体文件（`.otf`、`.ttf`），您可以使用专门的应用程序或网站（如 wakamaifondue.com），它们会分析字体文件并为您提供一份包含其所有特性、支持的语言和字形的详细报告。

性能和浏览器支持

两个常见的担忧是性能和浏览器兼容性。好消息是这两者都非常出色。

• 浏览器支持： `font-feature-settings` 属性多年来已在所有主流浏览器中得到广泛支持。较新的 `font-variant-*` 属性也拥有全面的良好支持。您可以放心使用它们。
• 性能： 激活 OpenType 特性对渲染性能的影响微乎其微。逻辑和备用字形已经存在于已下载的字体文件中；您只是在告诉浏览器的渲染引擎要遵循哪些指令。性能成本在于字体文件本身的大小，而不在于使用其包含的特性。一个具有许多特性的字体可能是个更大的文件，但激活它们基本上是免费的。

最佳实践与可行见解

能力越大，责任越大。以下是如何有效且专业地使用字体特性。

1. 将特性用于渐进式增强

将 OpenType 特性视为一种增强。您的文本在没有它们的情况下必须是完全可读和功能齐全的。激活旧式数字或自由连字只是为使用现代浏览器的用户提升了排版质量，创造了更好、更精致的体验。

2. 上下文决定一切

不要不假思索地全局应用特性。在正确的地方应用正确的特性。

• 在正文段落中使用旧式比例宽度数字。
• 在数据表和价格列表中使用等高等宽数字。
• 在展示性标题中使用自由连字和花饰，而不是正文文本。
• 为缩写词或标签使用小型大写字母，以帮助它们融入文本。

3. 使用 CSS 自定义属性进行组织

为了保持代码的整洁和可维护性，请在 CSS 自定义属性（变量）中定义您的特性组合。这使得可以轻松地一致地应用它们，并从一个中心位置更新它们。

示例：

            
:root {
  --font-features-body: "liga" 1, "onum" 1, "pnum" 1, "kern" 1;
  --font-features-heading: "liga" 1, "dlig" 1, "lnum" 1;
  --font-features-data: "lnum" 1, "tnum" 1, "zero" 1;
}

body {
  font-feature-settings: var(--font-features-body);
}

h1, h2, h3 {
  font-feature-settings: var(--font-features-heading);
}

.price, .code, .table-cell {
  font-feature-settings: var(--font-features-data);
}

            

              
                Copy
              
            
          

4. 精妙是关键

最好的排版通常是无形的。目标是提高可读性和美观性，而不是让技术本身引起注意。避免开启每一个可用特性的诱惑。在正确的上下文中应用几个精心挑选的特性，将比一堆杂乱无章的混合产生更大的影响。

结论：网络排版的新领域

对于任何网页开发者或设计师来说，掌握 CSS 字体特性值是革命性的一步。它使我们超越了设置字号和字重的基本机制，进入了真正的数字排版领域。通过理解和利用我们字体中嵌入的丰富特性，我们可以弥合印刷与网页设计之间长期存在的差距，创造出不仅功能齐全、易于访问，而且在排版上优美而精致的数字体验。

所以，下次您为一个项目选择字体时，不要止步于此。深入研究它的文档，用浏览器的开发者工具检查它，并发现它所拥有的隐藏力量。尝试连字、数字和样式集。您对这些细节的关注将使您的作品脱颖而出，并为所有人贡献一个更精致、更易读的网络。