Proprietà CSS font-kerning
La proprietà CSS font-kerning controlla le informazioni di crenatura del font. Scopri i valori e prova alcuni esempi.
La proprietà CSS font-kerning controlla se il browser utilizza le informazioni di crenatura memorizzate in un font.
La crenatura è la regolazione della spaziatura tra coppie specifiche di caratteri affinché il testo risulti visivamente equilibrato. Senza crenatura, ogni glifo mantiene il proprio interlinea predefinito, il che può lasciare spazi scomodi dopo lettere come A, V, T o W. I typographer includono nei font una tabella di coppie crenate (ad esempio AV, To, We) che indica al motore di rendering di avvicinare quelle lettere. font-kerning stabilisce se tale tabella viene applicata.
La crenatura riguarda esclusivamente lo spazio tra i glifi. Non va confusa con letter-spacing, che aggiunge una quantità fissa di tracking a ogni carattere indipendentemente dalla coppia.
Quando utilizzarla
Per la maggior parte delle pagine non è necessario toccare font-kerning — i browser moderni abilitano la crenatura di default per il testo del corpo. Si ricorre a questa proprietà in due situazioni:
- Forzare la crenatura su testo piccolo. Alcuni browser disattivano la crenatura al di sotto di una certa dimensione per motivi di prestazioni. Impostare
font-kerning: normalla applica a tutte le dimensioni — utile per una tipografia curata come intestazioni o citazioni in evidenza. - Disattivare la crenatura con
font-kerning: none. Questo è talvolta necessario per layout a spaziatura fissa, dati tabulari o quando si misura la larghezza del testo manualmente e si desidera avanzamenti prevedibili senza crenatura.
Se il font non dispone di una tabella di crenatura, la proprietà non produce alcun effetto visibile.
| Valore iniziale | auto |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.fontKerning = "none"; |
Sintassi
Sintassi della proprietà CSS font-kerning
font-kerning: auto | normal | none;Confronto tra crenatura attiva e disattiva
Le coppie AV, WA e To mostrano la crenatura nel modo più evidente. Nell'esempio seguente il primo blocco forza la crenatura attiva, il secondo la disattiva, così è possibile osservare come gli spazi si ampliano:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
font-family: serif;
font-size: 60px;
}
div.kerned {
font-kerning: normal;
}
div.unkerned {
font-kerning: none;
}
</style>
</head>
<body>
<h2>font-kerning property example</h2>
<div class="kerned">AVATAR WAVE To</div>
<div class="unkerned">AVATAR WAVE To</div>
</body>
</html>La differenza è più evidente a dimensioni grandi e nei font serif, che di solito contengono tabelle di crenatura più ricche.
Valori
font-kerning accetta una delle tre parole chiave seguenti:
| Valore | Descrizione |
|---|---|
auto | Lascia al browser la decisione se applicare la crenatura. Questo è il valore predefinito. I browser di solito la abilitano, ma possono disattivarla a dimensioni molto ridotte. |
normal | Applica sempre le informazioni di crenatura del font. |
none | Disabilita la crenatura; i glifi mantengono la spaziatura predefinita. |
Proprietà correlate
font-kerning fa parte dei controlli tipografici OpenType in CSS. Queste proprietà si abbinano bene ad essa:
letter-spacing— aggiunge o rimuove spazio uniforme tra tutte le lettere.font-feature-settings— accesso di basso livello alle funzionalità OpenType (kernè la funzionalità chefont-kerningespone con un nome più intuitivo).font-familyefont-variant— scegli e perfeziona il carattere tipografico.
Comportamento predefinito del browser
Poiché il valore iniziale è auto, lasciare la proprietà non impostata va bene per la maggior parte dei testi — la crenatura viene comunque applicata. Impostala esplicitamente solo quando hai bisogno di garantire un comportamento uniforme tra i browser, ad esempio font-kerning: normal sulle intestazioni display.