Propiedad CSS font-variant-ligatures

La propiedad CSS font-variant-ligatures controla qué ligaduras y formas contextuales utiliza una fuente. Una ligadura es un glifo único que una tipografía sustituye por dos o más caracteres que, de lo contrario, colisionarían o resultarían incómodos al colocarse uno al lado del otro — el ejemplo clásico es el par fi, donde el punto de la i choca con el gancho de la f.

Las ligaduras son una característica OpenType integrada en el archivo de fuente. Esta propiedad simplemente te permite activar o desactivar las disponibles; si la fuente no contiene una ligadura en particular, la propiedad no tiene efecto visible. Por esa razón, font-variant-ligatures solo cambia la apariencia, nunca el texto subyacente — copiar, buscar y los lectores de pantalla siguen viendo los caracteres originales.

font-variant-ligatures acepta una palabra clave de cada uno de los siguientes grupos (combinados en cualquier orden):

normal — deja que la fuente decida (el valor predeterminado).
none — desactiva todas las ligaduras y formas contextuales.
<common-lig-values> — common-ligatures / no-common-ligatures
<discretionary-lig-values> — discretionary-ligatures / no-discretionary-ligatures
<historical-lig-values> — historical-ligatures / no-historical-ligatures
<contextual-alt-values> — contextual / no-contextual

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

font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;

Puedes combinar una palabra clave de varios grupos. Por ejemplo, esto mantiene las ligaduras comunes, pero activa las decorativas y desactiva la unión contextual:

font-variant-ligatures: common-ligatures discretionary-ligatures no-contextual;

Ejemplo de la propiedad font-variant-ligatures

Los dos spans a continuación renderizan los mismos caracteres con la misma fuente. El primero deshabilita las ligaduras comunes, por lo que f e i aparecen como dos glifos separados; el segundo las habilita, de modo que el par se une en un único glifo fi.

<!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>

Pruébalo tú mismo »

Resultado

![Propiedad CSS font-variant-ligatures](/uploads/media/default/0001/03/fc947bebf8b5cb8a0a41ea56ea12d1fd303a936c.png "fi renderizado con y sin ligaduras comunes" width="420" height="200")

Tipos de ligaduras

CSS reconoce cuatro familias de ligaduras y formas contextuales, todas alineadas con el ampliamente utilizado formato OpenType. Cada familia tiene su propio par de palabras clave, por lo que puedes activarlas o desactivarlas de forma independiente.

Ligaduras comunes

Las ligaduras comunes se activan cuando dos caracteres "chocan" entre sí — el par de minúsculas f + i es el caso más representativo. Unirlos hace que el texto sea más cómodo de leer, por lo que la mayoría de las fuentes y navegadores habilitan las ligaduras comunes de forma predeterminada. Contrólala explícitamente con:

/* Enable common ligatures (the default) */
font-variant-ligatures: common-ligatures;

/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;

Ligaduras discrecionales

Las ligaduras discrecionales (también llamadas ligaduras decorativas) existen para el adorno visual más que para la legibilidad — piensa en una vistosa unión ct o st en una tipografía de display. Están desactivadas de forma predeterminada, por lo que debes activarlas solo donde desees la decoración:

/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;

/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;

Ligaduras históricas

Las ligaduras históricas reproducen formas que eran comunes en libros y manuscritos antiguos, como las combinaciones de la s larga (ſ). Al igual que las ligaduras discrecionales, son decorativas y están desactivadas de forma predeterminada:

/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;

/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;

Alternativas contextuales

Las alternativas contextuales mejoran la legibilidad eligiendo un glifo que se une suavemente a sus vecinos. Son más notables en escrituras conectadas (fuentes de caligrafía, árabe), donde los trazos deben fluir de forma continua de un carácter al siguiente. Contrólala con:

/* Enable contextual alternates */
font-variant-ligatures: contextual;

/* Disable contextual alternates */
font-variant-ligatures: no-contextual;

Valores

Valor	Descripción
normal	La activación de formas y ligaduras depende de la fuente, el idioma y el tipo de escritura. 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 (`contextual` / `no-contextual`).
initial	Establece la propiedad en su valor predeterminado (`normal`).
inherit	Hereda la propiedad del elemento padre.

Cuándo usarla

La mayoría de las veces normal es la elección correcta — el diseñador de la fuente ya eligió valores predeterminados sensatos. Recurre a valores explícitos cuando:

Un encabezado de display o logotipo necesita discretionary-ligatures decorativas que de otro modo no obtendría.
Un bloque monoespaciado o de código renderiza ligaduras que no deseas (algunos editores convierten != en un solo glifo); none o no-common-ligatures restaura los caracteres literales.
Has establecido text-rendering: optimizeSpeed o animas texto, y la sustitución de ligaduras provoca parpadeo — desactivarla puede estabilizar el renderizado.

Propiedades relacionadas

font-variant — la abreviatura que agrupa las ligaduras con mayúsculas, numéricos y otras características variantes.
font-feature-settings — acceso de bajo nivel a las mismas características OpenType mediante sus etiquetas de cuatro letras (liga, dlig, hlig, calt).
font-kerning — controla el espaciado entre pares de glifos, la característica que más frecuentemente se confunde con las ligaduras.
css-font-variant-caps-property y css-font-variant-numeric-property — propiedades longhands hermanas de font-variant-*.

Práctica

¿Qué controla la propiedad CSS 'font-variant-ligatures'?

Controla el espaciado entre caracteresControla la capitalización del textoControla cómo se muestran las ligaduras en el textoControla los ajustes de ajuste de textoControla la tipografía del texto