1. 首页
  2. CSS 菜鸟教程
  3. CSS - font-variant-alternates 属性

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>标题无变体</h1>
	 	<h1 class="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>注意两个标题中的字符“g”</p>
    <h1>标题无变体gggggggg</h1>
    <h1 class="variant">带变体的标题gggggggggg</h1>
</body>
</html>

<< CSS - font-variant 属性 CSS - font-variant-caps 属性 >>