Regla CSS @font-feature-values

La regla @font-feature-values establece un valor con nombre para ciertas características tipográficas de una familia de fuentes.

Se puede usar a nivel superior de CSS o en una regla de grupo condicional de CSS.

La regla @font-feature-values puede contener cualquiera de los siguientes valores de características:

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

Además del glifo predeterminado de un carácter, también puede haber otros glifos alternativos (por ejemplo, glifos swash, alternancias estilísticas) para una fuente. Una fuente puede tener varios glifos en estas alternancias, cada uno con un índice. Puedes crear un nombre para el índice con la regla @font-feature-values y, por lo tanto, puede usarse con font-variant-alternates. Ten en cuenta que esta regla requiere que se cargue una fuente correspondiente y funciona exclusivamente con la propiedad font-variant-alternates.

Sintaxis

Sintaxis de la regla CSS @font-feature-values

css

@font-feature-values <family-name> {
  @swash { name: index; }
  @annotation { name: index; }
  @ornaments { name: index; }
  @stylistic { name: index; }
  @styleset { name: index; }
  @character-variant { name: index; }
}

Ejemplo de la regla @font-feature-values:

Ejemplo de la regla CSS @font-feature-values

html

<!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 at-rule 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>

Try it Yourself »

Valores

Valor	Descripción
@swash	Especifica un nombre de característica que funciona con la notación funcional swash() de font-variant-alternates.
@annotation	Especifica un nombre de característica que funciona con la notación funcional annotation() de font-variant-alternates.
@ornaments	Especifica un nombre de característica que funciona con la notación funcional ornaments() de font-variant-alternates.
@stylistic	Especifica un nombre de característica que funciona con la notación funcional stylistic() de font-variant-alternates.
@styleset	Especifica un nombre de característica que funciona con la notación funcional styleset() de font-variant-alternates.
@character-variant	Especifica un nombre de característica que funciona con la notación funcional character-variant() de font-variant-alternates.

Práctica

¿Cuáles de las siguientes afirmaciones son verdaderas según la propiedad CSS 'font-feature-values'?

'font-feature-values' aplica una característica OpenType'font-feature-values' se aplica a todas las características OpenType disponiblesNo puedes usar más de una familia de fuentes con 'font-feature-values''font-feature-values' no es compatible con ninguna versión de Internet Explorer o Safari'font-feature-values' se utiliza para ajustar el kerning o la posición de letras individuales

Regla CSS @font-feature-values ​

Sintaxis ​

Ejemplo de la regla @font-feature-values: ​

Valores ​

Práctica ​

Regla CSS @font-feature-values

Sintaxis

Ejemplo de la regla @font-feature-values:

Valores

Práctica