CSS font-feature-settings
La proprietà CSS3 font-feature-settings consente di attivare funzionalità OpenType
La proprietà font-feature-settings
permette di abilitare o disabilitare funzionalità avanzate dei font OpenType, come maiuscolette, legature, numeri antichi e altro. Questo consente un controllo tipografico molto preciso, particolarmente utile nella composizione editoriale e nel design raffinato dei testi.
Sintassi
Significato dei valori principali:
-
'liga': Attiva o disattiva le legature standard. (
'liga' 1
abilita le legature,'liga' 0
le disattiva). -
'lnum': Usa numeri allineati (lining numbers) anziché numeri antichi (old-style).
-
'smcp': Converte le minuscole in maiuscoletto (small caps).
-
'onum': Usa numeri antichi (old-style numbers).
-
'kern': Abilita o disabilita il kerning automatico.
Esempio proprietà: font-feature-settings
Codice Esempio: font-feature-settings

.font-feature-settings-example {
font-family: "Georgia", serif;
font-feature-settings: 'smcp' 1; /* Attiva le maiuscolette */
font-size: 28px;
padding: 20px;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 8px;
color: #333;
}
Contenuto Esempio: font-feature-settings
Esempio di utilizzo di font-feature-settings
In questo esempio, viene attivata la funzione OpenType per le maiuscolette tramite 'smcp'
:
CSS e HTML per l'esempio di font-feature-settings:
<style>
.font-feature-settings-example {
font-family: "Georgia", serif;
font-feature-settings: 'smcp' 1; /* Attiva le maiuscolette */
font-size: 28px;
padding: 20px;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 8px;
color: #333;
}
</style>
<div class="font-feature-settings-example">
Questo testo utilizza le maiuscolette grazie a font-feature-settings.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.