CSS
HTML
JavaScript
PHP
Coming Soon
Generatori
Varie & Old

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

font-feature-settings: feature-tag on/off;

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

CODE: CSSpreleva codice
  1. .font-feature-settings-example {
  2.   font-family: "Georgia", serif;
  3.   font-feature-settings: 'smcp' 1; /* Attiva le maiuscolette */
  4.   font-size: 28px;
  5.   padding: 20px;
  6.   background-color: #f3f3f3;
  7.   border: 1px solid #ccc;
  8.   border-radius: 8px;
  9.   color: #333;
  10. }

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':


Questo testo utilizza le maiuscolette grazie a font-feature-settings.

Questo testo non utilizza le maiuscolette, testo standard.

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.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies