Regola CSS @font-feature-values
La regola at @font-feature-values assegna nomi alle funzionalità del font per la proprietà font-variant-alternates. Valori ed esempi.
La regola at @font-feature-values ti permette di assegnare un nome leggibile a un indice numerico di una funzionalità OpenType, così puoi riferirsi ai glifi alternativi di un font per nome anziché per numero grezzo quando usi la proprietà font-variant-alternates.
Questa pagina spiega quale problema risolve la regola, la sua sintassi, i blocchi di funzionalità accettati e un esempio funzionante completo.
Perché esiste
Molti font OpenType includono glifi alternativi oltre alla forma predefinita di ogni carattere — svolazzi (decorazioni ornamentali), ornamenti, varianti stilistiche, forme storiche e così via. All'interno del font, ogni alternativa è identificata solo da un numero (un indice). Senza questa regola at dovresti ricordare che, ad esempio, "lo svolazzo decorativo è l'indice 1" e codificare quel numero ovunque.
@font-feature-values ti permette di scrivere quella mappatura una sola volta, dare all'indice un nome come fancy, e poi chiamare swash(fancy) nel tuo CSS. Il nome si applica per famiglia di font, quindi due font diversi possono ciascuno definire il proprio svolazzo fancy che punta a indici differenti.
Due cose da tenere a mente:
- Funziona esclusivamente con
font-variant-alternates— non ha effetto su nessun'altra proprietà. - Ha effetto solo se il font corrispondente è effettivamente caricato e quel font contiene i glifi alternativi referenziati. Se invece hai bisogno di attivare funzionalità OpenType di basso livello tramite il loro tag a quattro lettere, usa
font-feature-settings.
Può essere inserita al livello superiore di un foglio di stile o all'interno di una regola at di gruppo condizionale come @media.
Blocchi di funzionalità
Il corpo della regola at può contenere uno qualsiasi di questi blocchi con nome, ciascuno dei quali mappa un nome su un indice:
@swash@annotation@ornaments@stylistic@styleset@character-variant
Il nome di ogni blocco corrisponde alla notazione funzionale corrispondente in font-variant-alternates (un nome @swash viene usato da swash(), un nome @ornaments da ornaments(), e così via).
Sintassi
Sintassi della regola at CSS @font-feature-values
@font-feature-values <family-name> {
@swash { name: index; }
@annotation { name: index; }
@ornaments { name: index; }
@stylistic { name: index; }
@styleset { name: index; }
@character-variant { name: index; }
}Esempio della regola at @font-feature-values:
Esempio della regola at CSS @font-feature-values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 1.5rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>@Font-feature-values at-rule example</h2>
<p>
The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
</p>
<p>This property is supported by Firefox and Safari.</p>
<p class="variant">This property is supported by Firefox and Safari.</p>
</body>
</html>Qui, @swash { fancy: 1; } assegna il nome fancy all'indice 1 del font Leitura Display Swashes. Il paragrafo .variant attiva poi quell'alternativa con font-variant-alternates: swash(fancy). Poiché il font nominato non è caricato in questo snippet, il testo ricade su un font predefinito e gli svolazzi non verranno visualizzati — lo scopo dell'esempio è mostrare il collegamento, non il risultato visivo. Sostituisci con un font che hai effettivamente caricato tramite @font-face per vedere le alternative.
Supporto dei browser
@font-feature-values è supportato in Firefox, Safari e Chrome/Edge (Chromium ha aggiunto il supporto nella versione 128, agosto 2024). Internet Explorer non l'ha mai supportato. Poiché i glifi alternativi sono puramente decorativi, trattarli come miglioramento progressivo è sicuro: i browser e i font che non supportano la funzionalità mostrano semplicemente il glifo predefinito.
Valori
| Valore | Descrizione |
|---|---|
| @swash | Specifica un nome di funzionalità che funziona con la notazione funzionale swash() di font-variant-alternates. |
| @annotation | Specifica un nome di funzionalità che funziona con la notazione funzionale annotation() di font-variant-alternates. |
| @ornaments | Specifica un nome di funzionalità che funziona con la notazione funzionale ornaments() di font-variant-alternates. |
| @stylistic | Specifica un nome di funzionalità che funziona con la notazione funzionale stylistic() di font-variant-alternates. |
| @styleset | Specifica un nome di funzionalità che funziona con la notazione funzionale styleset() di font-variant-alternates. |
| @character-variant | Specifica un nome di funzionalità che funziona con la notazione funzionale character-variant() di font-variant-alternates. |