CSS - font-variant-ligatures 属性_CSS 菜鸟教程

CSS 中的 font-variant-ligatures 属性用于控制文本中连字的使用。连字是某些字体中使用的艺术字母组合，用于提高易读性和美感。此属性允许您启用或禁用文本中特定类型的连字。

可能的值

normal：默认值，允许使用字体定义的连字。

none：禁用所有连字和上下文形式。

<common-lig-values>：启用常用的连字，例如 fi、ffi、th 或类似连字。对应于 OpenType 值 liga 和 clig。

common-ligatures：激活上述连字。
no-common-ligatures：停用上述连字。

<discretionary-lig-values>：控制特定的连字。对应于 OpenType 值 dlig。

discretionary-ligatures：激活上述连字。
no-discretionary-ligatures：停用上述连字。

<historical-lig-values>：控制历史连字。对应于 OpenType 值 hlig。

historical-ligatures：激活上述连字。
no-historical-ligatures：停用上述连字。

<contextual-alt-values>：启用上下文连字，这取决于周围的字符。对应于 OpenType 值 calt。

contextual：激活上述连字。关键字 normal 也会激活这些连字。
no-contextual：停用上述连字。

适用于

所有 HTML 元素。

DOM 语法

object.style.fontVariantLigatures = "normal | none | <common-lig-values>";

CSS font-variant-ligatures - 基本示例

下面是一个示例：

<html>
<head>
	 	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto Mono">
<style>
	 	p {
	 	 	 font-family: "Roboto Mono", serif;
	 	}
	 	.normal {
	 	 	 font-variant-ligatures: normal;
	 	}

	 	.none {
	 	 	 font-variant-ligatures: none;
	 	}

	 	.com-lig {
	 	 	 font-variant-ligatures: common-ligatures;
	 	}

	 	.no-com-lig {
	 	 	 font-variant-ligatures: no-common-ligatures;
	 	}

	 	.disc-lig {
	 	 	 font-variant-ligatures: discretionary-ligatures;
	 	}

	 	.no-disc-lig {
	 	 	 font-variant-ligatures: no-discretionary-ligatures;
	 	}

	 	.hist-lig {
	 	 	 font-variant-ligatures: historical-ligatures;
	 	}

	 	.no-hist-lig {
	 	 	 font-variant-ligatures: no-historical-ligatures;
	 	}

	 	.context {
	 	 	 font-variant-ligatures: contextual;
	 	}

	 	.no-context {
	 	 	 font-variant-ligatures: no-contextual;
	 	}
</style>
</head>
<body>
	 	<p class="normal">
	 	 	 normal - if fi ff tf ft jf fj
	 	</p>
	 	<p class="none">
	 	 	 none - if fi ff tf ft jf fj
	 	</p>
	 	<p class="com-lig">
	 	 	 common-ligatures - if fi ff tf ft jf fj
	 	</p>
	 	<p class="no-com-lig">
	 	 	 no-common-ligatures - if fi ff tf ft jf fj
	 	</p>
	 	<p class="disc-lig">
	 	 	 discretionary-ligatures - if fi ff tf ft jf fj
	 	</p>
	 	<p class="no-disc-lig">
	 	 	 no-discretionary-ligatures - if fi ff tf ft jf fj
	 	</p>
	 	<p class="hist-lig">
	 	 	 historical-ligatures - if fi ff tf ft jf fj
	 	</p>
	 	<p class="no-hist-lig">
	 	 	 no-historical-ligatures - if fi ff tf ft jf fj
	 	</p>
	 	<p class="context">
	 	 	 contextual - if fi ff tf ft jf fj
	 	</p>
	 	<p class="no-context">
	 	 	 no-contextual - if fi ff tf ft jf fj
	 	</p>
</body>
</html>

注意：将 font-family 更改为另一个值并观察更改。

<< CSS - font-variant-east-asian 属性 CSS - font-variant-numeric 属性 >>