font-variant-alternates

Resumen

La propiedad CSS font-variant-alternates controla el uso de glifos alternos. Estos glifos alternos pueden ser referenciados por nombres alternativos en @font-feature-values.

Las reglas-at definen nombres, para un tipo determinado de glifos alternativos (stylistic, styleset, character-variant, swash, ornament o annotation), asociándolos a un valor OpenType dado. Esta propiedad permite utilizar estos nombres de fácil uso (según se defina en @font-feature-values) dentro de la hoja de estilos.

Sintaxis

font-variant-alternates: normal;
font-variant-alternates: historical-forms;
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* Global values */
font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;

Valores

normal

Se deshabilita el uso de glifos alternos.

historical-forms

Se habilita la muestra de formas históricas , es decir, glifos que eran usados comúnmente en el pasado, pero no en la actualidad. Corresponde al valor de OpenType hist.

stylistic()

Esta función habilita la muestra de alternos estilísticos. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType salt, como salt 2.

styleset()

Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType ssXY, como ss02.

character-variant()

Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. Es muy similar a styleset(), aunque la variante aquí no crea glifos coherentes a un set de caracteres; los caracteres individuales tendrán estilos indipendientes, no necesariamente coherentes. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType cvXY, como cv02.

swash()

Esta función habilita la muestra de glifos de tipografía swash. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde a los valores de OpenType swsh y cswh, como swsh 2 y cswh 2.

ornaments()

Esta función habilita la muestra de ornamentas, que son florones y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType ornm, como ornm 2.

Nota: para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.

annotation()

Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType nalt, como nalt 2.

Sintaxis formal

normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]
where 
<feature-value-name> = <custom-ident>

Ejemplo

HTML

<p>Firefox rocks!</p>
<p class="variant">Firefox rocks!</p>

CSS

p.variant {
  font-family: Leitura Display Swashes;
  font-variant-alternates: swash(2);
}

Resultado

Nota: se necesita la fuente Open Type Leitura Display Swashes instalada para que este ejemplo funcione

Especificaciones

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

[1] Una implementación experimental estaba disponible desde Gecko 24. Se regía por la preferencia layout.css.font-features.enabled, con valor predeterminado de true, solamente disponible en Nightly y Aurora.