CSS @font-feature-values 规则-之路教程

语法

@font-feature-values: @swash | @annotation | @ornaments | @stylistic | @styleset | @character-variant;

@font-feature-values 规则示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-feature-values "Leitura Display Swashes" {
        @swash {
          fancy: 1;
        }
      }
      p {
        font-size: 1.5rem;
      }
      .variant {
        font-family: Leitura Display Swashes;
        font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>@Font-feature-values 属性示例</h2>
    <p>
      font-variant-alternates CSS 属性控制替代字形的使用。 这些替代字形 Jan 被 @font-feature-values 中定义的替代名称引用。
    </p>
    <p>Firefox 和 Safari 支持此属性。</p>
    <p class="variant">Firefox 和 Safari 支持此属性。</p>
  </body>
</html>

CSS @font-feature-values规则属性值说明

值	描述
@swash	指定适用于字体变体 - 交替的旋转旋钮（）功能符号的要素名称。只允许一个值。
@annotation	指定适用于Font-Variant-allyate的annotation（）功能符号的功能名称。只允许一个值。
@ornaments	指定适用于字体变体 - 交替的装饰品（）功能符号的功能名称。允许一个值。
@stylistic	指定与字体变体交替的样式（）功能符号配合使用的功能名称。只允许一个值。
@styleset	指定与字体变体 - 交替的styleeset（）功能符号配合使用的功能名称。值数无限制。
@character-variant	指定适用于字符变体（）字体变体 - 替代的字符变体（）功能符号的要素名称。允许一个或者两个值。
initial	它使属性使用其默认值。
inherit	它从其父母元素继承了属性。

CSS @font-feature-values 规则

@font-feature-values at-rule 为字体系列的某些字体特征设置命名值。

它可以在 CSS 的顶层或者 CSS 条件组规则中使用。

@font-feature-values at-rule 可以包含以下任何特征值：

@annotation
@ornaments
@stylistic
@styleset
@character-variant

除了字符的默认字形外，字体还可以有其他替代字形（例如，花体字形、样式替代）。
一个字体可以在这些替代中具有多个字形，每个字形都有一个索引。
我们可以使用 font-feature-values at-rule 为索引创建名称，因此它可以与 font-variant-alternate 一起使用。

初始值	swash
应用于	所有元素。
继承	可继承
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.fontFeatureValues = "swash";

日期：2020-06-02 22:14:31 来源：oir作者：oir

←CSS font-feature-settings 属性

CSS font-kerning 属性→

语法

@font-feature-values 规则示例：

CSS @font-feature-values规则属性值说明

目录