Proprietà CSS font-variant-alternates
La proprietà CSS font-variant-alternates gestisce la selezione di glifi alternativi. Scopri i valori e prova gli esempi.
La proprietà CSS font-variant-alternates controlla la selezione dei glifi alternativi — le forme speciali dei caratteri (swash, ornamenti, set stilistici, forme storiche e così via) che un font OpenType può fornire in aggiunta ai caratteri predefiniti.
Questa pagina spiega cosa sono i glifi alternativi, come attivarli, come ogni funzione corrisponde alle feature OpenType e le insidie da tenere d'occhio.
Perché usare i glifi alternativi?
Molti font OpenType di alta qualità includono versioni extra di determinati caratteri. Uno swash può aggiungere un elegante ricciolo a una maiuscola; un set stilistico può trasformare un'intera famiglia di lettere in un aspetto calligrafico; le forme storiche possono ripristinare la "ſ" lunga usata nella tipografia antica. Per impostazione predefinita il browser renderizza il glifo standard — font-variant-alternates è il modo per optare per gli alternativi senza dover conoscere i tag delle feature OpenType di basso livello.
Questa proprietà è utile quando si desidera una raffinatezza tipografica (loghi, intestazioni, testi editoriali di grande impatto) e il font scelto contiene effettivamente i glifi alternativi. Se il font non ha alternative, la proprietà non produce alcun effetto visibile.
Come funziona: @font-feature-values
La maggior parte delle funzioni seguenti (stylistic(), styleset(), character-variant(), swash(), ornaments(), annotation()) accetta un nome anziché un numero. Questi nomi leggibili vengono definiti una sola volta con la regola at @font-feature-values e poi referenziati nel foglio di stile. Questa indirezione consente di assegnare nomi significativi come fancy o circled agli indici di feature altrimenti opachi esposti dal font.
/* 1. Map a readable name to a feature index, per font family */
@font-feature-values "Leitura Display Swashes" {
@swash { fancy: 1; }
}
/* 2. Reference the name in font-variant-alternates */
.title {
font-family: "Leitura Display Swashes";
font-variant-alternates: swash(fancy);
}L'eccezione è historical-forms, che è una semplice parola chiave e non richiede alcuna voce in @font-feature-values.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.fontVariantAlternates = "normal"; |
Sintassi
Sintassi della proprietà CSS font-variant-alternates
font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();Esempio della proprietà font-variant-alternates:
Esempio della proprietà CSS font-variant-alternates
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 2rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>Font-variant-alternates property example</h2>
<p>This paragraph uses the swash alternate.</p>
<p class="variant">This paragraph uses the swash alternate.</p>
</body>
</html>Risultato
Valori
| Valore | Descrizione |
|---|---|
| normal | Nessuna delle feature è abilitata. |
| historical-forms | Abilita la visualizzazione delle forme storiche. |
| stylistic() | Abilita la visualizzazione di alternative stilistiche. |
| styleset() | Abilita la visualizzazione con set stilistici. |
| character-variant() | Abilita alternative stilistiche specifiche per i caratteri. |
| swash() | Abilita i glifi swash. |
| ornaments() | Abilita la visualizzazione degli ornamenti. |
| annotation() | Abilita forme di annotazione alternative. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
È possibile combinare più funzioni in una singola dichiarazione separandole con spazi — ad esempio font-variant-alternates: stylistic(alt-a) styleset(my-set);. Solo la parola chiave speciale normal non può essere combinata con le funzioni.
Corrispondenza tra funzioni e feature OpenType
Se si è utilizzato l'approccio di livello inferiore font-feature-settings, questa tabella mostra la feature OpenType a cui corrisponde ogni funzione:
| Funzione | Feature OpenType | Uso tipico |
|---|---|---|
historical-forms | hist | "ſ" lunga, forme di lettere arcaiche. |
stylistic() | salt | Un singolo glifo alternativo scelto per nome. |
styleset() | ss01–ss20 | Un set coordinato di alternative. |
character-variant() | cv01–cv99 | Alternative per carattere impostabili indipendentemente. |
swash() | swsh / cswh | Riccioli decorativi sulle lettere. |
ornaments() | ornm | Dingbat e segni decorativi. |
annotation() | nalt | Numeri e lettere cerchiati o incorniciati. |
Insidie
- Il font deve contenere l'alternativo. Se il font attivo non ha swash o set stilistici, la proprietà non produce alcun effetto — non esiste un glifo di fallback a cui ricorrere.
- I nomi devono essere dichiarati prima. Una funzione come
swash(fancy)funziona solo sefancyè mappato in un blocco@font-feature-valuesper la corrispondentefont-family. - Viene ereditata. Poiché la proprietà viene ereditata, impostarla sull'elemento più piccolo che ne ha bisogno (o reimpostarla a
normalsui figli) per evitare che i glifi decorativi si propaghino al testo circostante.
Proprietà correlate
font-variant— la shorthand che raggruppa tutte le proprietà estesefont-variant-*.@font-feature-values— definisce i nomi leggibili referenziati da questa proprietà.font-family— seleziona il font che fornisce gli alternativi.
Compatibilità con i browser
| Browser | Supporto |
|---|---|
| Chrome | 36+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 10+ |
| Opera | 23+ |