Propiedad CSS font-variant-alternates

La propiedad font-variant-alternates controla la selección de glifos alternativos.

Los nombres de las funciones de glifos alternativos (styleset, stylistic, character-variant, ornament, swash, annotation) pueden definirse en @font-feature-values. Los nombres legibles por humanos especificados en @font-feature-values están permitidos en la hoja de estilos.

Valor inicial	normal
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredable	Sí.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.fontVariantAlternates = "normal";

Sintaxis

Sintaxis de la propiedad CSS font-variant-alternates

css

font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();

Ejemplo de la propiedad font-variant-alternates:

Ejemplo de la propiedad CSS font-variant-alternates

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-feature-values "Leitura Display Swashes" {
        @swash {
          fancy: 1;
        }
      }
      p {
        font-size: 2rem;
      }
      .variant {
        font-family: Leitura Display Swashes;
        font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-alternates property example</h2>
    <p>This paragraph uses the swash alternate.</p>
    <p class="variant">This paragraph uses the swash alternate.</p>
  </body>
</html>

Try it Yourself »

Resultado

CSS font-variant-alternates Property

Valores

Valor	Descripción
normal	Ninguna de las características está habilitada.
historical-forms	Habilita la visualización de formas históricas.
stylistic()	Habilita la visualización de alternancias estilísticas.
styleset()	Habilita la visualización con conjuntos estilísticos.
character-variant()	Habilita alternativas estilísticas específicas para caracteres.
swash()	Habilita glifos swash.
ornaments()	Habilita la visualización de ornamentos.
annotation()	Habilita formas de anotación alternativas.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Compatibilidad con navegadores

Navegador	Compatibilidad
Chrome	36+
Edge	79+
Firefox	34+
Safari	10+
Opera	23+

Práctica

¿Qué función tiene la propiedad 'font-variant-alternates' en CSS?

Ayuda a controlar las técnicas de optimización para motores de búsqueda.Permite habilitar conjuntos estilísticos y variantes de caracteres para fuentes OpenType.Modifica el color del texto dentro de un documento CSS.Permite la selección de alternancias normales, de pequeñas mayúsculas o sin ligaduras comunes en una fuente.Se utiliza para designar el tema de una página web.

Propiedad CSS font-variant-alternates ​

Sintaxis ​

Ejemplo de la propiedad font-variant-alternates: ​

Resultado ​

Valores ​

Compatibilidad con navegadores ​