CSS @font-feature-values Rule

CSS @font-feature-values Rule

 

CSS @font-feature-values Rule



The @font-feature-values at-rule sets a named value for certain font features of a font family.

It can be used at the top level of CSS or in a CSS conditional-group at-rule.

The @font-feature-values at-rule can contain any of the following feature values:

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

Besides a character’s default glyph there can also be other alternate glyphs (e.g., swash glyphs, stylistic alternates) for a font. A font can have several glyphs in these alternates each of which has an index. You can create a name for the index with the font-feature-values at-rule and thus it can be used with font-variant-alternate.

Initial Valueswash
Applies toAll elements.
InheritedYes.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.fontFeatureValues = "swash";

Syntax

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

Example of the @font-feature-values at-rule:

<!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 property example</h2>
    <p>
      The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
    </p>
    <p>This property is supported by Firefox and Safari.</p>
    <p class="variant">This property is supported by Firefox and Safari.</p>
  </body>
</html>

Values

ValueDescription
@swashSpecifies a feature name that works with the swash() functional notation of font-variant-alternates. Only one value is allowed.
@annotationSpecifies a feature name that works with the annotation() functional notation of font-variant-alternates. Only one value is allowed.
@ornamentsSpecifies a feature name that works with the ornaments() functional notation of font-variant-alternates. One value is allowed.
@stylisticSpecifies a feature name that works with the stylistic() functional notation of font-variant-alternates. Only one value is allowed.
@stylesetSpecifies a feature name that works with the styleset() functional notation of font-variant-alternates. The number of values is unlimited.
@character-variantSpecifies a feature name that works with the character-variant() functional notation of font-variant-alternates. One or two values are allowed.
initialIt makes the property use its default value.
inheritIt inherits the property from its parent's element.
Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

CAN FEEDBACK
close