font-variant-alternates
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde marzo de 2023.
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.
| Valor inicial | normal |
|---|---|
| Applies to | all elements and text. It also applies to ::first-letter and ::first-line. |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | discrete |
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, comosalt 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, comoss02. 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 OpenTypecvXY, comocv02. 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
swshycswh, comoswsh 2ycswh 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, comoornm 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, comonalt 2.
Sintaxis formal
font-variant-alternates =
normal |
[ stylistic( <font-feature-value-name> ) || historical-forms || styleset( <font-feature-value-name># ) || character-variant( <font-feature-value-name># ) || swash( <font-feature-value-name> ) || ornaments( <font-feature-value-name> ) || annotation( <font-feature-value-name> ) ]
<font-feature-value-name> =
<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 |
|---|
| CSS Fonts Module Level 4> # font-variant-alternates-prop> |