连字控制：font-variant-ligatures 的 discretionary 与 contextual 差异
大家好，今天我们来深入探讨 CSS 中 font-variant-ligatures 属性，特别是其 discretionary 和 contextual 这两个值的区别。font-variant-ligatures 用于控制字体中连字的显示，连字是指将两个或多个字符组合成一个单独的字形的排版技术，旨在提高可读性和美观性。理解 discretionary 和 contextual 的作用对于精细控制文本的显示效果至关重要。
什么是连字？
在深入探讨具体的属性值之前，我们首先需要理解连字的概念。连字并非简单的字符组合，而是字体设计者专门设计的、将多个字符融合为一个字形的视觉效果。例如，常见的连字包括 "fi"、"fl"、"ff"、"ffi" 和 "ffl"。
传统的排版中，这些字符组合可能会因为字符间距的问题而显得拥挤或不美观。连字通过调整字符的形状和位置，使它们更和谐地组合在一起，从而提升文本的整体美感和可读性。
font-variant-ligatures 属性概览
font-variant-ligatures 属性用于控制是否启用字体中定义的连字。它接受多个值，每个值控制不同类型的连字。主要的属性值包括：
normal: 禁用所有连字（这是默认值）。none: 禁用所有连字。与normal效果相同，但更明确地表明禁用连字的意图。common-ligatures: 启用常见的连字，如 "fi"、"fl"、"ff"、"ffi" 和 "ffl"。no-common-ligatures: 禁用常见的连字。discretionary-ligatures: 启用可选连字，这些连字通常不属于标准字符集的一部分，而是字体设计者提供的额外特性。no-discretionary-ligatures: 禁用可选连字。historical-ligatures: 启用历史连字，这些连字在过去的排版中很常见，但在现代排版中较少使用。no-historical-ligatures: 禁用历史连字。contextual: 启用上下文连字，这些连字的显示取决于周围的字符。no-contextual: 禁用上下文连字。all: 启用所有可用的连字类型。
我们可以组合使用这些值，以实现对连字显示的精细控制。例如，font-variant-ligatures: common-ligatures discretionary-ligatures; 将同时启用常见的和可选的连字。
discretionary-ligatures: 可选连字
discretionary-ligatures 用于启用字体设计者提供的可选连字。这些连字通常不属于标准字符集的一部分，而是作为额外的排版特性提供。它们的出现与否对文本的意义没有影响，主要目的是为了提升视觉效果。
可选连字的具体形式取决于字体本身的设计。不同的字体可能提供不同的可选连字集。例如，某些字体可能提供用于美化特定字符组合的连字，或者提供更具装饰性的连字。
示例：
假设我们使用一种名为 "MyCustomFont" 的字体，它提供了一个可选连字，将 "Th" 组合成一个特殊的字形。
<!DOCTYPE html>
<html>
<head>
<title>Discretionary Ligatures Example</title>
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('MyCustomFont.woff2') format('woff2'); /* 替换为实际字体文件路径 */
}
.discretionary {
font-family: 'MyCustomFont', sans-serif;
font-variant-ligatures: discretionary-ligatures;
}
.no-discretionary {
font-family: 'MyCustomFont', sans-serif;
font-variant-ligatures: no-discretionary-ligatures;
}
</style>
</head>
<body>
<p class="discretionary">This text uses discretionary ligatures. The "Th" combination should be displayed as a special ligature.</p>
<p class="no-discretionary">This text does not use discretionary ligatures. The "Th" combination will be displayed as separate characters.</p>
</body>
</html>在这个例子中，.discretionary 类启用了可选连字，因此 "Th" 组合将显示为 "MyCustomFont" 字体提供的特殊连字。.no-discretionary 类禁用了可选连字，因此 "Th" 将显示为两个单独的字符。
需要注意的是：
- 并非所有字体都提供可选连字。如果字体没有定义可选连字，则
discretionary-ligatures属性将不起作用。 - 可选连字的具体形式取决于字体设计。您需要查阅字体的文档或样本，以了解它提供了哪些可选连字。
contextual: 上下文连字
contextual 用于启用上下文连字。与常见的和可选的连字不同，上下文连字的显示取决于周围的字符。也就是说，只有在特定的字符上下文中，才会应用连字。
上下文连字的主要目的是为了提高文本的可读性，特别是在处理某些语言或字体时。它们可以根据相邻字符的形状和位置，调整字符的显示方式，从而避免字符之间的冲突或拥挤。
示例：
假设我们使用一种 hypothetical 字体，它提供了一个上下文连字，当字母 "r" 出现在字母 "o" 之后时，会调整 "r" 的形状，使其与 "o" 更好地连接。
<!DOCTYPE html>
<html>
<head>
<title>Contextual Ligatures Example</title>
<style>
@font-face {
font-family: 'HypotheticalFont';
src: url('HypotheticalFont.woff2') format('woff2'); /* 替换为实际字体文件路径 */
}
.contextual {
font-family: 'HypotheticalFont', sans-serif;
font-variant-ligatures: contextual;
}
.no-contextual {
font-family: 'HypotheticalFont', sans-serif;
font-variant-ligatures: no-contextual;
}
</style>
</head>
<body>
<p class="contextual">The word "horror" uses contextual ligatures. The "r" after "o" should be adjusted.</p>
<p class="no-contextual">The word "horror" does not use contextual ligatures. The "r" after "o" will be displayed as a standard character.</p>
</body>
</html>在这个例子中，.contextual 类启用了上下文连字，因此在 "horror" 这个词中，"r" 的形状将被调整，使其与 "o" 更好地连接。.no-contextual 类禁用了上下文连字，因此 "r" 将显示为标准的字符。
需要注意的是：
- 上下文连字的行为高度依赖于字体本身的设计。并非所有字体都提供上下文连字。
- 上下文连字的具体规则也由字体设计者定义。您需要查阅字体的文档或样本，以了解它提供了哪些上下文连字以及它们应用的上下文。
discretionary vs. contextual: 关键区别
| 特性 | discretionary-ligatures |
contextual |
|---|---|---|
| 类型 | 可选连字 | 上下文连字 |
| 目的 | 纯粹的视觉增强，不影响文本的意义 | 提高可读性，避免字符冲突，特别是在特定语言或字体中 |
| 触发条件 | 始终启用，只要字体支持，就会显示可选连字 | 仅在特定的字符上下文中启用，取决于周围的字符 |
| 字体依赖性 | 高度依赖字体设计。字体必须提供可选连字才能生效。 | 高度依赖字体设计。字体必须提供上下文连字以及定义连字应用的上下文规则。 |
| 影响文本意义 | 不影响文本的意义。即使禁用可选连字，文本的含义仍然保持不变。 | 不影响文本的意义，但可能会影响文本的可读性。禁用上下文连字可能会导致字符之间的冲突或拥挤。 |
| 常见用例 | 用于添加装饰性元素，或者美化特定的字符组合。 | 用于处理特定语言的排版问题，例如阿拉伯语的字符连接，或者调整字符的形状以适应周围的字符。 |
| 示例 | 将 "Th" 组合成一个特殊的字形，或者提供更具装饰性的 "ffi" 连字。 | 调整 "r" 的形状，使其与 "o" 更好地连接，或者调整字符间距以避免字符之间的重叠。 |
简单来说：
discretionary是可选的，与字符的上下文无关。 只要字体支持，就会显示可选连字，用于增强视觉效果。contextual是上下文相关的。 只有在特定的字符上下文中，才会应用连字，主要目的是提高可读性。
代码示例：组合使用 discretionary 和 contextual
我们可以组合使用 discretionary 和 contextual 属性，以实现更精细的连字控制。
<!DOCTYPE html>
<html>
<head>
<title>Combined Ligatures Example</title>
<style>
@font-face {
font-family: 'MyFont';
src: url('MyFont.woff2') format('woff2'); /* 替换为实际字体文件路径 */
}
.combined {
font-family: 'MyFont', sans-serif;
font-variant-ligatures: discretionary-ligatures contextual;
}
</style>
</head>
<body>
<p class="combined">This text uses both discretionary and contextual ligatures. For example, "Th" might be displayed as a special ligature, and the spacing between "a" and "v" might be adjusted in the word "have".</p>
</body>
</html>在这个例子中，.combined 类同时启用了可选连字和上下文连字。这意味着：
- 如果 "MyFont" 字体提供了可选连字（例如，将 "Th" 组合成一个特殊的字形），则会显示该连字。
- 如果 "MyFont" 字体提供了上下文连字（例如，调整 "a" 和 "v" 之间的间距），则会根据字符上下文应用这些连字。
通过组合使用这两个属性，我们可以充分利用字体提供的所有连字特性，从而获得最佳的排版效果。
实际应用中的注意事项
- 字体支持：
font-variant-ligatures属性的效果完全取决于字体本身的设计。并非所有字体都支持所有的连字类型。在使用这些属性之前，请务必查阅字体的文档或样本，以了解它提供了哪些连字特性。 - 浏览器兼容性：
font-variant-ligatures属性具有良好的浏览器兼容性。大多数现代浏览器都支持该属性。但是，为了确保最佳的兼容性，建议您使用 CSS 前缀，例如-webkit-font-variant-ligatures和-moz-font-variant-ligatures。 - 可读性： 虽然连字可以提高文本的美观性，但过度使用连字可能会降低可读性。请谨慎使用连字，并确保它们不会干扰文本的理解。
- 性能： 启用大量的连字可能会对性能产生轻微的影响，因为浏览器需要进行额外的计算来确定是否应用连字。但是，在大多数情况下，这种影响可以忽略不计。
- 语言支持： 某些语言（例如阿拉伯语） heavily 使用连字。在这种情况下，
font-variant-ligatures属性对于正确显示文本至关重要。
如何确定字体支持哪些连字？
确定字体支持哪些连字并非总是易事，但以下是一些方法：
- 字体文档： 最好的方法是查阅字体的官方文档。字体设计者通常会在文档中详细说明字体支持的所有特性，包括连字。
- 字体样本： 许多字体提供商提供字体样本，您可以下载这些样本并查看字体在不同情况下的显示效果。这些样本通常会展示字体支持的各种连字。
- 字体编辑工具： 如果您有字体编辑工具（例如 FontForge），您可以打开字体文件并查看其内部结构。字体编辑工具可以显示字体中定义的连字。
- 在线字体分析工具： 有一些在线工具可以分析字体文件并提取有关字体的信息，包括其支持的连字。
总结
font-variant-ligatures 属性的 discretionary 和 contextual 值分别用于控制可选连字和上下文连字的显示。discretionary 用于纯粹的视觉增强，而 contextual 用于提高可读性。理解它们的差异对于精细控制文本的显示效果至关重要。
理解这两个属性，加上其他的属性，可以使你的排版能力更上一层楼。希望这篇文章能够帮助你更好地理解和使用 font-variant-ligatures 属性，并在你的项目中创造出更美观、更易读的文本。
更多IT精英技术系列讲座，到智猿学院