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
Valor calculadocomo se especifica
Animation typediscrete

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 | (en-US) [ (en-US) stylistic( <feature-value-name> ) || (en-US) historical-forms || (en-US) styleset( <feature-value-name># (en-US) ) || (en-US) character-variant( <feature-value-name># (en-US) ) || (en-US) swash( <feature-value-name> ) || (en-US) ornaments( <feature-value-name> ) || (en-US) annotation( <feature-value-name> ) ] (en-US)

where
<feature-value-name> = <custom-ident> (en-US)

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.
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! (en-US)

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.