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, ornamentannotation), 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.

Valor inicialnormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableyes
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

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

Especificación Estatus Comentarios
CSS Fonts Module Level 3
La definición de 'font-variant-alternates' en esta especificación.
Candidate Recommendation Definición inicial

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!

Característica Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Soporte b√°sico 34 (34) [1] ? ? ? ?
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte b√°sico ? 34.0 (34)[1] ? ? ?

[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.