CSS - font-variant-alternates 属性

CSS font-variant-alternates 属性用于控制字体中给定字符的备用字形的使用。

可能的值

1. normal：停用备用字符。

2. 下面给出的一个或多个关键字：

historical-forms：启用历史备用字形。对应于 OpenType 值 hist。
stylistic（）：为单个字符启用样式替代字形。对应于 OpenType 值 salt （salt 2）。
styleset（）：为字符集启用样式替代字形。特定于字体的名称映射到一个数字。对应于 OpenType 值 ssXY （ss02）。
character-variant（）：类似于 styleset（），但不为一组字符创建连贯的字形，而是为单个字符创建连贯的字形。OpenType 值 cvXY （cv02）。
swash（）：启用 swash 字形。特定于字体的名称映射到一个数字。对应于 OpenType 值 swsh （swsh 2）和 cswh （cswh 2）。
ornaments（）：启用装饰品和其他 dingbat 字形。特定于字体的名称映射到一个数字。对应于 OpenType 值 ornm （ornm 2）
annotation（）：启用注释，例如倒置字符或带圆圈的数字。特定于字体的名称映射到一个数字。对应于 OpenType 值 nalt （nalt 2）

适用于

所有 HTML 元素。

DOM 语法

object.style.fontVariantAlternates = "normal | swash() | stylistic() | styleset() | character-variant() | ornaments()";

CSS font-variant-alternates - swash（）的用法

以下示例演示了如何使用 swash（） 函数，该函数接受一个参数，该参数是映射到数字的特定于字体的名称。@font-feature-values 用于定义 “SansationLight” 字体的 swash 特征的名称。稍后，font-variant-alternate 属性将 swash 名称作为值：


<html>
<head>
<style>
	 	@font-face {
	 	 	 font-family: "f1";
	 	 	 src: url("font/SansationLight.woff");
	 	}

	 	@font-feature-values "f1" {
	 	 	 @swash {
	 	 	 	 	fancy: 2;
	 	 	 }
	 	}

	 	h1 {
	 	 	 font-family: "f1";
	 	 	 font-size: 3rem;
	 	}

	 	p {
	 	 	 background-color: aqua;
	 	}

	 	.variant {
	 	 	 font-variant-alternates: swash(fancy);
	 	 	 font-size: 4rem;
	 	}
</style>
</head>
<body>
	 	<h1>Heading without variant</h1>
	 	<h1 class="variant">Heading with variant</h1>
</body>
</html>

CSS font-variant-alternates - stylistic（）的用法

以下示例演示了 stylistic（） 函数的使用，该函数采用一个参数，该参数是映射到数字的特定于字体的名称。@font-feature-values 用于定义 “SansationLight” 字体的 swash 特征的名称。稍后，font-variant-alternate 属性采用定义名称作为值的样式函数：


<html>
<head> 	
<style>
	 	@font-face {
	 	 	 font-family: "f1";
	 	 	 src: url("font/SansationLight.woff");
	 	}

	 	@font-feature-values "f1" {
	 	 	 @stylistic {
	 	 	 	 	s: 1;
	 	 	 }
	 	}

	 	h1 {
	 	 	 font-family: "f1";
	 	 	 font-size: 3rem;
	 	}

	 	p {
	 	 	 background-color: aqua;
	 	}

	 	.variant {
	 	 	 font-variant-alternates: stylistic(s);
	 	}
</style>
</head>
<body>
	 	<p>Notice the character 'g' in both the headings</p>
	 	<h1>Heading without variant</h1>
	 	<h1 class="variant" >Heading with variant</h1>
</body>
</html>

打印本页

CSS - font-variant-alternates 属性

可能的值

适用于

DOM 语法

CSS font-variant-alternates - swash（） 的用法

CSS font-variant-alternates - stylistic（） 的用法

CSS font-variant-alternates - swash（）的用法

CSS font-variant-alternates - stylistic（）的用法