Proprietà CSS font-variant-ligatures

La proprietà CSS font-variant-ligatures controlla quali legature e forme contestuali utilizza un font. Una legatura è un singolo glifo che il carattere tipografico sostituisce a due o più caratteri che altrimenti si sovrapporrebbero o risulterebbero scomodi se messi uno accanto all'altro — l'esempio classico è la coppia fi, in cui il punto della i si scontra con il gancio della f.

Le legature sono una funzionalità OpenType integrata nel file del font. Questa proprietà permette semplicemente di attivare o disattivare quelle disponibili; se il font non contiene una determinata legatura, la proprietà non ha alcun effetto visibile. Per questo motivo, font-variant-ligatures modifica solo l'aspetto, mai il testo sottostante — la copia, la ricerca e i lettori di schermo vedono sempre i caratteri originali.

font-variant-ligatures accetta una parola chiave da ciascuno dei seguenti gruppi (combinabili in qualsiasi ordine):

normal — lascia decidere al font (il valore predefinito).
none — disattiva ogni legatura e forma contestuale.
<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

Valore iniziale	normal
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter e ::first-line.
Ereditato	Sì.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.fontVariantLigatures = "normal";

Sintassi

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

È possibile elencare una parola chiave da più gruppi insieme. Ad esempio, questo mantiene le legature comuni, abilita quelle decorative e disattiva il collegamento contestuale:

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

Esempio della proprietà font-variant-ligatures

I due span qui sotto renderizzano gli stessi caratteri con lo stesso font. Il primo disabilita le legature comuni, quindi f e i appaiono come due glifi separati; il secondo le abilita, così la coppia si unisce in un unico 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>

Provalo tu stesso »

Risultato

![Proprietà CSS font-variant-ligatures](/uploads/media/default/0001/03/fc947bebf8b5cb8a0a41ea56ea12d1fd303a936c.png "fi renderizzato con e senza legature comuni" width="420" height="200")

Tipi di legature

CSS riconosce quattro famiglie di legature e forme contestuali, tutte allineate con il formato OpenType ampiamente utilizzato. Ogni famiglia ha la propria coppia di parole chiave, quindi è possibile attivarle e disattivarle in modo indipendente.

Legature comuni

Le legature comuni si attivano quando due caratteri si "scontrerebbero" altrimenti — la coppia f minuscola + i è il caso classico. Unirli rende il testo più comodo da leggere, quindi la maggior parte dei font e dei browser abilita le legature comuni per impostazione predefinita. È possibile attivarle o disattivarle esplicitamente con:

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

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

Legature discrezionali

Le legature discrezionali (dette anche legature decorative) esistono per motivi estetici piuttosto che per la leggibilità — si pensi a un'ornata unione ct o st in un carattere display. Sono disattivate per impostazione predefinita, quindi vanno abilitate solo dove si desidera la decorazione:

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

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

Legature storiche

Le legature storiche riproducono forme un tempo comuni nei libri e nei manoscritti antichi, come le combinazioni con la s lunga (ſ). Come le legature discrezionali, sono decorative e disattivate per impostazione predefinita:

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

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

Alternative contestuali

Le alternative contestuali migliorano la leggibilità scegliendo un glifo che si colleghi fluidamente ai caratteri vicini. Sono più evidenti negli script connessi (font calligrafici, arabo), dove i tratti devono scorrere in modo continuo da un carattere all'altro. È possibile attivarle o disattivarle con:

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

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

Valori

Valore	Descrizione
normal	L'attivazione delle forme e delle legature dipende dal font, dalla lingua e dal tipo di script. È il valore predefinito di questa proprietà.
none	Tutte le legature e le forme contestuali sono disabilitate.
`<common-lig-values>`	Controlla tutte le legature.
`<discretionary-lig-values>`	Controlla legature specifiche.
`<historical-lig-values>`	Controlla le legature utilizzate nei libri antichi.
`<contextual-alt-values>`	Controlla l'adattamento delle lettere al loro contesto (`contextual` / `no-contextual`).
initial	Imposta la proprietà al suo valore predefinito (`normal`).
inherit	Eredita la proprietà dall'elemento genitore.

Quando utilizzarla

Nella maggior parte dei casi normal è la scelta giusta — il progettista del font ha già selezionato impostazioni predefinite ragionevoli. Ricorrere a valori espliciti quando:

Un titolo display o logo necessita di discretionary-ligatures decorative che altrimenti non avrebbe.
Un blocco monospace / codice renderizza legature indesiderate (alcuni editor trasformano != in un unico glifo); none o no-common-ligatures ripristina i caratteri letterali.
Si imposta text-rendering: optimizeSpeed o si anima il testo e la sostituzione delle legature causa sfarfallio — disabilitarla può stabilizzare il rendering.

Proprietà correlate

font-variant — la shorthand che raggruppa legature con maiuscoletto, numeri e altre funzionalità varianti.
font-feature-settings — accesso di basso livello alle stesse funzionalità OpenType tramite i loro tag a quattro lettere (liga, dlig, hlig, calt).
font-kerning — controlla la spaziatura tra coppie di glifi, la funzionalità più spesso confusa con le legature.
css-font-variant-caps-property e css-font-variant-numeric-property — proprietà longhand sorelle di font-variant-*.

Esercizio

Pratica

Cosa controlla la proprietà CSS 'font-variant-ligatures'?

Controlla la spaziatura tra i caratteriControlla la capitalizzazione del testoControlla come vengono visualizzate le legature nel testoControlla le impostazioni di ritorno a capo del testoControlla il carattere tipografico del testo