Propriedade CSS font-variant-ligatures

A propriedade CSS font-variant-ligatures controla quais ligaduras e formas contextuais uma fonte utiliza. Uma ligadura é um glifo único que uma tipografia substitui por dois ou mais caracteres que, caso contrário, colidiriam ou ficariam com aparência estranha quando colocados lado a lado — o exemplo clássico é o par fi, onde o ponto do i choca com o gancho do f.

As ligaduras são um recurso OpenType incorporado no arquivo da fonte. Esta propriedade simplesmente permite ativar ou desativar as disponíveis; se a fonte não contiver uma ligadura específica, a propriedade não terá efeito visível. Por isso, font-variant-ligatures altera apenas a aparência, nunca o texto subjacente — copiar, pesquisar e leitores de tela ainda enxergam os caracteres originais.

font-variant-ligatures aceita uma palavra-chave de cada um dos seguintes grupos (combinados em qualquer ordem):

normal — deixa a fonte decidir (o padrão).
none — desativa todas as ligaduras e formas contextuais.
<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
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdado	Sim.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.fontVariantLigatures = "normal";

Sintaxe

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

Você pode listar uma palavra-chave de vários grupos em conjunto. Por exemplo, isso mantém as ligaduras comuns, mas ativa as decorativas e desativa a junção contextual:

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

Exemplo da propriedade font-variant-ligatures

Os dois spans abaixo renderizam os mesmos caracteres com a mesma fonte. O primeiro desativa as ligaduras comuns, fazendo com que f e i apareçam como dois glifos separados; o segundo as ativa, fazendo com que o par se una em um ú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>

Experimente Você Mesmo »

Resultado

![Propriedade CSS font-variant-ligatures](/uploads/media/default/0001/03/fc947bebf8b5cb8a0a41ea56ea12d1fd303a936c.png "fi renderizado com e sem ligaduras comuns" width="420" height="200")

Tipos de ligaduras

O CSS reconhece quatro famílias de ligaduras e formas contextuais, todas alinhadas com o amplamente utilizado formato OpenType. Cada família tem seu próprio par de palavras-chave, permitindo ativá-las e desativá-las de forma independente.

Ligaduras comuns

As ligaduras comuns são ativadas quando dois caracteres "colidiriam" entre si — o par de letras minúsculas f + i é o caso mais típico. Uni-los mantém o texto confortável para leitura, por isso a maioria das fontes e navegadores ativa as ligaduras comuns por padrão. Alterne-as explicitamente com:

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

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

Ligaduras discricionárias

As ligaduras discricionárias (também chamadas de ligaduras decorativas) existem para efeito visual e não para legibilidade — pense em uma ornamentada junção ct ou st em uma tipografia de exibição. Elas estão desativadas por padrão, então você as ativa somente onde deseja a decoração:

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

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

Ligaduras históricas

As ligaduras históricas reproduzem formas que eram comuns em livros e manuscritos antigos, como as combinações com o s longo (ſ). Assim como as ligaduras discricionárias, são decorativas e estão desativadas por padrão:

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

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

Alternativas contextuais

As alternativas contextuais melhoram a legibilidade ao escolher um glifo que se conecta suavemente aos caracteres vizinhos. São mais perceptíveis em scripts conectados (fontes de caligrafia, árabe), onde os traços devem fluir continuamente de um caractere para o próximo. Alterne-as com:

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

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

Valores

Valor	Descrição
normal	A ativação de formas e ligaduras depende da fonte, do idioma e do tipo de script. Este é o valor padrão desta propriedade.
none	Todas as ligaduras e formas contextuais são desativadas.
`<common-lig-values>`	Controla todas as ligaduras.
`<discretionary-lig-values>`	Controla ligaduras específicas.
`<historical-lig-values>`	Controla ligaduras usadas em livros antigos.
`<contextual-alt-values>`	Controla a adaptação das letras ao seu contexto (`contextual` / `no-contextual`).
initial	Define a propriedade com seu valor padrão (`normal`).
inherit	Herda a propriedade do elemento pai.

Quando usar

Na maioria das vezes, normal é a escolha certa — o designer da fonte já escolheu padrões sensatos. Use valores explícitos quando:

Um título de exibição ou logotipo precisa de discretionary-ligatures decorativas que não obteria de outra forma.
Um bloco monoespaçado / de código renderiza ligaduras que você não quer (alguns editores transformam != em um único glifo); none ou no-common-ligatures restaura os caracteres literais.
Você define text-rendering: optimizeSpeed ou anima texto, e a substituição de ligaduras causa tremulação — desativá-la pode estabilizar a renderização.

Propriedades relacionadas

font-variant — o shorthand que agrupa ligaduras com maiúsculas, numérico e outros recursos variantes.
font-feature-settings — acesso de baixo nível aos mesmos recursos OpenType por suas tags de quatro letras (liga, dlig, hlig, calt).
font-kerning — controla o espaçamento entre pares de glifos, o recurso mais frequentemente confundido com ligaduras.
css-font-variant-caps-property e css-font-variant-numeric-property — propriedades longas font-variant-* irmãs.

Prática

O que a propriedade CSS 'font-variant-ligatures' controla?

Controla o espaçamento entre os caracteresControla a capitalização do textoControla como as ligaduras no texto são exibidasControla as configurações de quebra de textoControla a tipografia do texto