Proprietà CSS font-feature-settings
La proprietà CSS font-feature-settings controlla le funzionalità tipografiche avanzate nei font OpenType. Scopri la proprietà e prova esempi pratici.
La proprietà font-feature-settings offre un controllo di basso livello sulle funzionalità tipografiche avanzate integrate nei font OpenType — come versalietti, cifre old-style, legature, frazioni e alternative stilistiche. Queste funzionalità sono progettate dal type designer e memorizzate all'interno del file del font; font-feature-settings è l'interruttore che le attiva o disattiva.
Il valore è la parola chiave normal (il valore predefinito) oppure un elenco separato da virgole di coppie <feature-tag-value>. Ogni coppia è un tag OpenType di quattro lettere scritto come stringa, seguito opzionalmente da un valore:
font-feature-settings: "smcp" 1; /* enable small caps */
font-feature-settings: "smcp" on; /* same thing — "on" means 1 */
font-feature-settings: "smcp", "onum"; /* two features, omitted value defaults to 1 */
font-feature-settings: "liga" 0; /* disable standard ligatures */Le parole chiave on e off sono sinonimi di 1 e 0. La maggior parte delle funzionalità sono semplici interruttori on/off, ma alcune (come i set stilistici o le varianti di carattere) accettano un intero più alto per selezionare una variante specifica. La funzionalità ha un effetto visibile solo quando il font renderizzato contiene effettivamente quella funzionalità — se il font ne è privo, la dichiarazione viene ignorata silenziosamente.
Quando usarla (e quando no)
font-feature-settings è la via di fuga. Per le esigenze comuni, preferire la proprietà abbreviata font-variant di livello superiore e le sue sotto-proprietà (font-variant-caps, font-variant-numeric, font-variant-ligatures, …). Sono più facili da leggere, vengono ereditate in modo pulito e si degradano in modo elegante:
/* Preferred — high-level and readable */
font-variant-caps: small-caps;
/* Low-level equivalent — only when the font has no friendlier path */
font-feature-settings: "smcp";Ricorrere a font-feature-settings solo quando si necessita di una funzionalità che non ha una parola chiave font-variant dedicata — ad esempio un set stilistico specifico del font ("ss01") o una funzionalità discrezionale che il font espone tramite tag.
Un avvertimento importante: font-feature-settings è tutto o niente. Poiché l'intero elenco sostituisce qualsiasi valore ereditato, ridichiararlo su un elemento figlio reimposta ogni funzionalità impostata sull'elemento genitore. Mantenere tutti i tag che si desidera attivi in un'unica dichiarazione anziché distribuirli tra le regole.
Tag OpenType comuni
| Tag | Funzionalità | Uso tipico |
|---|---|---|
smcp | Versalietti | Renderizza le lettere minuscole come maiuscolette. |
c2sc | Maiuscole in versalietti | Trasforma anche le lettere maiuscole in versalietti. |
liga | Legature standard | Combina coppie di lettere come fi, fl (attivo per impostazione predefinita; impostare 0 per disabilitare). |
dlig | Legature discrezionali | Legature decorative come ct, st. |
onum | Cifre old-style | Numerali con ascendenti/discendenti che si inseriscono nel testo corrente. |
lnum | Cifre allineate | Numerali di altezza uniforme allineati all'altezza delle maiuscole. |
tnum | Cifre tabulari | Numerali a larghezza fissa per colonne di numeri. |
frac | Frazioni | Formatta 1/2 come una frazione tipografica. |
kern | Crenatura | Regola la spaziatura tra coppie specifiche di lettere. |
swsh | Svolazzi | Ornamenti decorativi sui glifi. |
Il supporto dei browser è eccellente nei browser moderni, ma per i motori più vecchi si potrebbero ancora incontrare le versioni di questa proprietà con prefisso -webkit-, -moz- e -ms-.
| Valore iniziale | normal |
|---|---|
| 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.fontFeatureSettings = "normal"; |
Sintassi
Sintassi della proprietà CSS font-feature-settings
font-feature-settings: normal | <feature-tag-value># | initial | inherit;Esempio della proprietà font-feature-settings:
Esempio della proprietà CSS font-feature-settings con valore smcp
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-family: sans-serif;
}
h3 {
font-feature-settings: "smcp" 1;
}
</style>
</head>
<body>
<h2>Font-feature-settings example</h2>
<h3>The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.</h3>
</body>
</html>Esempio con più funzionalità
È possibile abilitare più funzionalità contemporaneamente con un elenco separato da virgole. Qui attiviamo le cifre old-style e disabilitiamo le legature standard sullo stesso elemento:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-feature-settings: "onum" 1, "liga" 0;
}
</style>
</head>
<body>
<p>Order 1234567890 ships in office. </p>
</body>
</html>Si noti che le cifre cambiano solo se il font scelto include numerali old-style. Se una funzionalità non è presente nel font, quella parte della dichiarazione non ha effetto.
Valori
| Valore | Descrizione |
|---|---|
| normal | Questo è il valore predefinito di questa proprietà. |
<feature-tag-value> | Durante il rendering del testo, l'elenco dei valori dei tag OpenType viene passato al motore di layout del testo per abilitare o disabilitare le funzionalità del font. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
- font-variant — la proprietà abbreviata di alto livello che dovrebbe essere la prima scelta per versalietti, legature e cifre numeriche.
- font-family — scegliere un font che contenga effettivamente le funzionalità OpenType che si desidera abilitare.
- text-transform — modifica il case dei caratteri stessi, a differenza dei versalietti che ne cambiano solo l'aspetto.
- letter-spacing — regola la spaziatura tra i caratteri a livello di layout anziché attraverso la crenatura del font.