CSS - @font-feature-values

上一页
下一页

CSS @font-feature-values 规则允许您为 OpenType 字体功能定义自定义值，例如连字、样式替代、花饰字或其他高级排版功能。此规则提供了一种控制这些功能在文档的特定元素中的使用的方法。

@font-feature-values 规则由两部分组成：

  • 选择器：指定要应用字体功能的一个或多个元素。
  • 字体功能声明：定义特定 OpenType 功能的自定义值。

您可以在任何 CSS conditional-group-at-rule 中或在 CSS 的顶层使用 @font-feature-values 规则。

可能的值

  • @swash − 定义与 font-variant-alternates 的 swash（） 函数一起使用的功能名称。它只允许一个值。例如：ident1： 2 有效，而 ident1： 2 4 无效。
  • @annotation − 定义与 font-variant-alternates 的 annotation（） 函数一起使用的功能名称。它只允许一个值。例如：ident1： 2 有效，而 ident1： 2 4 无效。
  • @ornaments − 定义与 font-variant-alternates 中的 ornaments（） 函数一起使用的功能名称，只允许一个值，例如 ident1： 2 有效，而 ident2： 2 4 无效。
  • @stylistic − 定义与 font-variant-alternates 中的 stylistic（） 函数一起使用的功能名称，只能有一个值，例如 ident1： 2 有效，而 ident2： 2 4 无效。
  • @styleset − 定义与 font-variant-alternates 中的 stylistic（） 函数一起使用的功能名称，允许无限数量的值，例如 ident1： 2 4 12 1 映射到 OpenType 值 ss02、ss04、ss12 和 ss01。大于 99 的值有效，但不对应于任何 OpenType 值，因此将被忽略。
  • @character-variant − 定义与 font-variant-alternates 中的 character-variant（） 函数一起使用的功能名称，允许一个或两个值，例如 ident1： 3 映射到 cv03=1，ident2： 2 4 映射到 cv02=4，但 ident2： 2 4 5 无效。

语法


@font-feature-values =	
	 	@font-feature-values <family-name># { <declaration-rule-list> }

CSS @font-feature-values - @swash

以下示例演示了 @swash 规则的用法，该规则将字符 'fancy' 的花饰花字功能设置为值 2。font-variant-alternates： swash（fancy） 属性用于将 swash 功能 fancy 应用于文本 -


<html>
<head>
<style>
	 	@font-face {
	 	 	 font-family: CustomFont;
	 	 	 src: url("font/Brygada1918-Italic.ttf");
	 	}
	 	@font-feature-values "CustomFont" {
	 	 	 @swash {
	 	 	 	 	fancy: 2;
	 	 	 }
	 	}
	 	.p1 {
	 	 	 font-family: "CustomFont";
	 	}
	 	.swash-text {
	 	 	 font-variant-alternates: swash(fancy);
	 	}
</style>
</head>
<body> 	
	 	<p>'fancy' swash styling.</p>
	 	<p class="swash-text p1">'fancy' swash styling.</p>
</body>
</html>

CSS @font-feature-values - @annotation

以下示例演示了如何使用 @font-feature-values 通过将 's' 赋值 4 来定义注释样式。然后，font-variant-alternates： annotation（s） 属性用于将注释功能 's' 应用于文本 -


<html>
<head>
<style>
	 	@font-face {
	 	 	 font-family: CustomFont;
	 	 	 src: url("font/Brygada1918-Italic.ttf");
	 	}
	 	@font-feature-values "CustomFont" {
	 	 	 @annotation {
	 	 	 	 	s: 4;
	 	 	 }
	 	}
	 	.p1 {
	 	 	 font-family: "CustomFont";
	 	}
	 	.annotation-text {
	 	 	 font-variant-alternates: annotation(s);
	 	}
</style>
</head>
<body>
	 	<p class="annotation-text p1">'s' annotation styling.</p>
	 	<p>'s' annotation styling.</p>
</body>
</html>

CSS @font-feature-values - @ornaments

以下示例演示了如何使用 @font-feature-values 通过将 'test' 赋值 12 来定义装饰样式。然后使用 font-variant-alternates： ornaments（test） 属性将装饰功能 'test' 应用于文本 −


<html>
<head>
<style>
	 	@font-face {
	 	 	 font-family: CustomFont;
	 	 	 src: url("font/SansationLight.woff");
	 	}
	 	@font-feature-values "CustomFont" {
	 	 	 @ornaments {
	 	 	 	 	test: 12;
	 	 	 }
	 	}
	 	p {
	 	 	 font-family: "CustomFont";
	 	}
	 	.ornaments-text {
	 	 	 font-variant-alternates: ornaments(test);
	 	}
</style>
</head>
<body>
	 	<p class="ornaments-text">'test' ornaments styling.</p>
	 	<p>'test' ornaments styling.</p>
</body>
</html>

CSS @font-feature-values - @stylistic

以下示例演示了如何使用 @font-feature-values 通过将 'data' 赋值 2 来定义样式。然后使用 font-variant-alternates： stylistic（data） 属性将样式特征 'data' 应用于文本 −


<html>
<head>
<style>
	 	@font-face {
	 	 	 font-family: CustomFont;
	 	 	 src: url("font/Brygada1918-Italic.ttf");
	 	}
	 	@font-feature-values "CustomFont" {
	 	 	 @stylistic {
	 	 	 	 	data: 2;
	 	 	 }
	 	}
	 	p {
	 	 	 font-family: "CustomFont";
	 	}
	 	.ornaments-text {
	 	 	 font-variant-alternates: stylistic(data);
	 	}
</style>
</head>
<body>
	 <p class="ornaments-text">'data' stylistic styling.</p>
	 <p>'data' stylistic styling.</p>
</body>
</html>

CSS @font-feature-values - @styleset

以下示例演示了 @font-feature-values 来定义一个名为 “fancy” 的样式集功能，其 OpenType 值为 2、4、12 和 1。带有 styleset（） 功能表示法的 font-variant-alternates 属性用于应用 “fancy” 样式集 -


<html>
<head>
<style>
	 	@font-face {
	 	 	 font-family: CustomFont;
	 	 	 src: url("font/SansationLight.woff");
	 	}
	 	@font-feature-values "CustomFont" {
	 	 	 @styleset {
	 	 	 	 	fancy: 2 4 12 1;
	 	 	 }
	 	}
	 	p {
	 	 	 font-family: "CustomFont";
	 	}
	 	.ornaments-text {
	 	 	 font-variant-alternates: styleset(fancy);
	 	}
</style>
</head>
<body>
	 	<p class="ornaments-text">'fancy' styleset styling.</p>
	 	<p>'fancy' styleset styling.</p>
</body>
</html>

CSS @font-feature-values - @character 变体

以下示例演示如何使用 @font-feature-values 来定义名为 “test1” 的字符变体特征，其值为 2 和 4。然后，带有 styleset（） 功能表示法的 font-variant-alternates 属性将与 “test1” 字符变体 −


<html>
<head>
<style>
	 	@font-face {
	 	 	 font-family: CustomFont;
	 	 	 src: url("font/SansationLight.woff");
	 	}
	 	@font-feature-values "CustomFont" {
	 	 	 @character-variant {
	 	 	 	 	test1: 2 4;
	 	 	 }
	 	}
	 	p {
	 	 	 font-family: "CustomFont";
	 	}
	 	.ornaments-text {
	 	 	 font-variant-alternates: character-variant(test1);
	 	}
	 	</style>
</head>
<body>
	 	<p class="ornaments-text">'test1' character-variant styling.</p>
	 	<p>'test1' character-variant styling.</p>
</body>
</html>
打印本页
上一页
下一页