Propiedad CSS font-variant-ligatures
La propiedad font-variant-ligatures controla las ligaduras y formas contextuales que producen formas más armonizadas.
Esta propiedad se especifica mediante los siguientes valores:
- normal
- none
<common-lig-values><discretionary-lig-values><historical-lig-values><contextual-alt-values>
| 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.fontVariantLigatures = "normal"; |
Sintaxis
Sintaxis de la propiedad CSS font-variant-ligatures
font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;Ejemplo de la propiedad font-variant-ligatures:
Ejemplo de la propiedad CSS font-variant-ligatures con los valores no-common-ligatures y common-ligatures
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
div {
font-family: Lora, serif;
font-size: 35vw;
}
.gray {
font-variant-ligatures: no-common-ligatures;
color: #ccc;
}
.blue {
font-variant-ligatures: common-ligatures;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Font-variant-ligatures property example</h2>
<div>
<span class="gray">fi</span>
<span class="blue">fi</span>
</div>
</body>
</html>Resultado
Tipos de ligaduras
Existen varios tipos de ligaduras reconocidas por CSS. Estas ligaduras están alineadas con el formato OpenType de uso generalizado. Vamos a revisar cada una.
Ligaduras comunes
Estas ligaduras se utilizan principalmente cuando los caracteres "chocan" entre sí. Esto hace que el texto sea más difícil e incómodo de leer. Como ejemplo, podemos tomar la combinación de las letras minúsculas "i" y "f". Habilitar las ligaduras unirá estas dos letras, facilitando su lectura. CSS habilita las ligaduras comunes de forma predeterminada. Pero puedes habilitarlas o deshabilitarlas manualmente de la siguiente manera:
Propiedad CSS font-variant-ligatures
/* Enable common ligatures */
font-variant-ligatures: common-ligatures;
/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;Ligaduras discrecionales
Las ligaduras discrecionales, también llamadas ligaduras decorativas, se utilizan más como decoración. De hecho, no están diseñadas para su lectura. Estas ligaduras están deshabilitadas en CSS de forma predeterminada y son opcionales. Esto significa que puedes habilitarlas cuando quieras. Habilitar o deshabilitar las ligaduras discrecionales se hace de la siguiente manera:
Propiedad CSS font-variant-ligatures
/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;
/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;Ligaduras históricas
Las ligaduras históricas también están diseñadas con fines decorativos. Puedes habilitarlas o deshabilitarlas usando el siguiente código:
Propiedad CSS font-variant-ligatures
/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;
/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;Alternativas contextuales
Las alternativas contextuales son útiles para mejorar la legibilidad. Proporcionan un mejor comportamiento de unión de los caracteres que forman la ligadura. Las alternativas contextuales son especialmente útiles en el caso de scripts conectados. Gracias a ellas, los trazos se conectan correctamente de un carácter a otro, manteniendo un flujo continuo.
Valores
| Valor | Descripción |
|---|---|
| normal | La activación de formas y ligaduras depende de la fuente, el idioma y el tipo de script. Este es el valor predeterminado de esta propiedad. |
| none | Todas las ligaduras y formas contextuales están deshabilitadas. |
<common-lig-values> | Controla todas las ligaduras. |
<discretionary-lig-values> | Controla ligaduras específicas. |
<historical-lig-values> | Controla las ligaduras que se utilizan en libros antiguos. |
<contextual-alt-values> | Controla la adaptación de las letras a su contexto. |
| initial | Hace que la propiedad utilice su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué controla la propiedad CSS 'font-variant-ligatures'?