font-variant-alternates
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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
swsh
ycswh
, comoswsh 2
ycswh 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( <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> ) ]
<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
Specification |
---|
CSS Fonts Module Level 4 # font-variant-alternates-prop |
Compatibilidad con navegadores
BCD tables only load in the browser