Propiedad CSS font-variant-alternates
La propiedad CSS font-variant-alternates controla la selección de glifos alternativos. Consulta los valores y prueba ejemplos.
La propiedad CSS font-variant-alternates controla la selección de glifos alternativos — las formas especiales de caracteres (swashes, ornamentos, conjuntos estilísticos, formas históricas, etc.) que una fuente OpenType puede proporcionar además de sus caracteres predeterminados.
Esta página explica qué son los glifos alternativos, cómo habilitarlos, cómo se relaciona cada función con las características de OpenType y los errores comunes a tener en cuenta.
¿Por qué usar glifos alternativos?
Muchas fuentes OpenType de alta calidad incluyen versiones adicionales de ciertas letras. Un swash puede añadir un adorno decorativo a una mayúscula; un conjunto estilístico puede cambiar toda una familia de letras a un aspecto caligráfico; las formas históricas pueden restaurar la "ſ" larga usada en la tipografía antigua. Por defecto, un navegador renderiza el glifo estándar — font-variant-alternates es la forma de activar los alternativos sin tener que conocer las etiquetas de características OpenType de bajo nivel.
Recurrirías a esta propiedad cuando quieras refinamiento tipográfico (logotipos, encabezados, texto editorial de exhibición) y la fuente elegida contenga realmente los glifos alternativos. Si la fuente no tiene alternativas, la propiedad no tiene ningún efecto visible.
Cómo funciona: @font-feature-values
La mayoría de las funciones siguientes (stylistic(), styleset(), character-variant(), swash(), ornaments(), annotation()) toman un nombre en lugar de un número. Esos nombres legibles por humanos se definen una vez con la regla at @font-feature-values, y luego se referencian desde tu hoja de estilos. Esta indirección te permite asignar nombres significativos como fancy o circled a los índices de características opacas que expone una fuente.
/* 1. Map a readable name to a feature index, per font family */
@font-feature-values "Leitura Display Swashes" {
@swash { fancy: 1; }
}
/* 2. Reference the name in font-variant-alternates */
.title {
font-family: "Leitura Display Swashes";
font-variant-alternates: swash(fancy);
}La excepción es historical-forms, que es una palabra clave simple y no necesita ninguna entrada en @font-feature-values.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.fontVariantAlternates = "normal"; |
Sintaxis
Sintaxis de la propiedad CSS font-variant-alternates
font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();Ejemplo de la propiedad font-variant-alternates:
Ejemplo de la propiedad CSS font-variant-alternates
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 2rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>Font-variant-alternates property example</h2>
<p>This paragraph uses the swash alternate.</p>
<p class="variant">This paragraph uses the swash alternate.</p>
</body>
</html>Resultado
Valores
| Valor | Descripción |
|---|---|
| normal | Ninguna de las características está habilitada. |
| historical-forms | Habilita la visualización de formas históricas. |
| stylistic() | Habilita la visualización de alternativas estilísticas. |
| styleset() | Habilita la visualización con conjuntos estilísticos. |
| character-variant() | Habilita alternativas estilísticas específicas para caracteres. |
| swash() | Habilita los glifos swash. |
| ornaments() | Habilita la visualización de ornamentos. |
| annotation() | Habilita formas de anotación alternativas. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Puedes combinar varias funciones en una sola declaración separándolas con espacios — por ejemplo font-variant-alternates: stylistic(alt-a) styleset(my-set);. Solo la palabra clave especial normal no puede mezclarse con las funciones.
Cómo se relacionan las funciones con las características de OpenType
Si has utilizado el enfoque de nivel más bajo font-feature-settings, esta tabla muestra la característica OpenType a la que corresponde cada función:
| Función | Característica OpenType | Uso típico |
|---|---|---|
historical-forms | hist | "ſ" larga, formas de letras arcaicas. |
stylistic() | salt | Un único glifo alternativo elegido por nombre. |
styleset() | ss01–ss20 | Un conjunto coordinado de alternativas. |
character-variant() | cv01–cv99 | Alternativas por carácter que se pueden configurar de forma independiente. |
swash() | swsh / cswh | Adornos decorativos en las letras. |
ornaments() | ornm | Dingbats y marcas decorativas. |
annotation() | nalt | Números y letras encuadrados o en círculo. |
Errores comunes
- La fuente debe contener el alternativo. Si la fuente activa no tiene swash ni conjunto estilístico, la propiedad no hace nada de forma silenciosa — no hay un glifo de reserva al que recurrir.
- Los nombres deben declararse primero. Una función como
swash(fancy)solo funciona sifancyestá mapeado en un bloque@font-feature-valuespara lafont-familycorrespondiente. - Es heredada. Dado que la propiedad se hereda, establécela en el elemento más pequeño que la necesite (o restablécela a
normalen los hijos) para evitar que los glifos decorativos se filtren al texto circundante.
Propiedades relacionadas
font-variant— el shorthand que agrupa todas las propiedades largasfont-variant-*.@font-feature-values— define los nombres legibles que referencia esta propiedad.font-family— selecciona la fuente que proporciona las alternativas.
Compatibilidad con navegadores
| Navegador | Soporte |
|---|---|
| Chrome | 36+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 10+ |
| Opera | 23+ |