Propiedad CSS font-variant-alternates
The font-variant-alternates CSS property deals with the selection of alternate glyphs. See the values and try examples.
La propiedad font-variant-alternates controla la selección de glifos alternativos.
Los nombres de las funciones de glifos alternativos (styleset, stylistic, character-variant, ornament, swash, annotation) pueden definirse en @font-feature-values. Los nombres legibles por humanos especificados en @font-feature-values están permitidos en la hoja de estilos.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | 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 alternancias estilísticas. |
| styleset() | Habilita la visualización con conjuntos estilísticos. |
| character-variant() | Habilita alternativas estilísticas específicas para caracteres. |
| swash() | Habilita 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. |
Compatibilidad con navegadores
| Navegador | Compatibilidad |
|---|---|
| Chrome | 36+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 10+ |
| Opera | 23+ |
Práctica
Práctica
¿Qué función tiene la propiedad 'font-variant-alternates' en CSS?