Utilizzo delle funzioni OpenType

Le funzioni OpenType sono come scomparti segreti nei font. Sbloccali e troverai modi incredibili per rendere diverso l'aspetto e il comportamento dei font. Non tutte le funzioni di OpenType sono appropriate per essere utilizzate sempre, ma alcune di esse sono fondamentali per una composizione tipografica ottimale.

Per utilizzare le funzioni OpenType di un font nel progetto, è necessario includerle nel progetto Web e quindi applicare uno stile al testo con il CSS richiesto. Consulta la nostra guida alla sintassi per esempi di ciascuna funzione con codice che è possibile copiare e incollare nel tuo CSS.

Per includere le funzioni OpenType di un font in un progetto Web, visita la pagina dei progetti Web e fai clic sul collegamento "modifica" del progetto. Nella sezione Set di caratteri, seleziona la casella Funzioni OpenType.

Quando la casella è selezionata, varrà visualizzato un elenco di funzioni disponibili per quella particolare famiglia di font per web, come legature, caratteri alternativi o maiuscoletto. 

L'elenco mostra le funzioni OpenType che sono disponibili in tutti gli spessori e gli stili della famiglia. Se una funzione è inclusa solo in spessori o stili specifici, non è inclusa nell'elenco.

Controlla il supporto del browser per le funzioni che stai utilizzando

Lo scarso supporto del browser per font-variant e font-feature-settings significa che le funzioni OpenType potrebbero non funzionare correttamente in tutti i contesti che ti interessano.

Il supporto è diminuito in modo incomprensibile. Le versioni più recenti dei browser che richiedono il supporto vengono fornite con avvertenze e i browser meno recenti che non supportano le funzioni OpenType non hanno praticamente supporto. Per impostazione predefinita, Chrome non attiva le funzioni che dovrebbero essere attivate per impostazione predefinita (come le legature comuni e le alternative contestuali). Safari su macOS e iOS ignora qualsiasi valore specificato per font-feature-settings, scegliendo invece di attivare alcune funzioni per impostazione predefinita e le scelte predefinite non possono essere modificate. Alcune versioni di Firefox (versione 15 e precedenti) hanno problemi quando sono attivati più set stilistici. L'applicazione delle funzioni OpenType in Chrome 32 e versioni precedenti interrompe il funzionamento dei font per web.

L'attuale supporto del browser si basa in gran parte sui prefissi dei fornitori. Nel documento per l'aiuto per la Sintassi per le funzioni OpenType in CSS, troverai il codice pieno di proprietà con prefisso del fornitore che assomigliano all'esempio precedente.

Dai stile al tuo testo con le funzioni OpenType utilizzando CSS

La Sintassi CSS per attivare le funzioni OpenType è ancora in evoluzione. Quello che devi sapere è che ci sono proprietà sia di alto livello che di basso livello e l'ereditarietà è particolarmente complicata.

La proprietà CSS font-feature-settings di basso livello è in qualche modo supportata nei browser tramite i prefissi dei fornitori, ma è complicata da usare per due motivi. Innanzitutto, si basa su tag di funzioni OpenType di quattro caratteri difficili da ricordare. In secondo luogo, tutti i tag delle funzioni sono specificati in una singola proprietà, e ciò può essere complicato. Consulta la sintassi per l'utilizzo di funzioni OpenType specifiche e la sintassi per l'utilizzo di più funzioni OpenType.

La proprietà CSS font-variant di alto livello e le sue proprietà secondarie sono ottime perché utilizzano valori del linguaggio naturale come "small-caps" e "diagonal-fractions". Il W3C desidera che vengano utilizzati quando possibile, ma il supporto del browser è inesistente. Tuttavia, è una buona idea abituarsi alla sintassi.

Quindi, useremo sia font-variant che font-feature-settings, tenendo presente come sono progettate per funzionare. Specificheremo prima font-variant di facile lettura nel nostro CSS, come il codice precedente.

Eredità

Poiché font-feature-setting è una proprietà di basso livello prevista "per casi speciali in cui il suo utilizzo è l'unico modo per accedere a una particolare funzione dei font utilizzata di rado", sovrascriverà font-variant indipendentemente dall'ordine di origine. Ma fai attenzione: sostituisce anche se stessa:

Tutti i valori font-feature-settings ereditati vengono sovrascritti quando la proprietà viene riapplicata. Nell'esempio precedente, per gli elementi con una classe di classe devono avere sia il maiuscoletto (smcp) che le cifre in stile antico (onum) attivati, il valore "onum" dovrebbe essere incluso di nuovo, quindi potremmo riscrivere la dichiarazione in questo modo:

Valori font-feature-settings indicizzati

Alcuni valori font-feature-settings sono un po' più complessi. Negli esempi illustrati finora, ogni valore era una stringa (o un set di stringhe delimitato da virgole). La presenza o l'assenza di tag di funzioni quali come "onum" e "smcp" è come una scelta binaria: le funzioni sono attivate o disattivate.

Ciò ha senso. Ma cosa succede se, ad esempio, un font contiene due diverse versioni di ornato del carattere "A" maiuscola? In questo caso, non vogliamo semplicemente attivare gli ornati: vogliamo gli ornati e scegliere un particolare ornato. Quindi possiamo aggiungere un indice numerico al valore dopo la stringa:

Potresti chiederti, quale numero dovrei usare qui? Quanti ornati diversi ci sono in un font? Dipende dal font. Usare "0" significa disattivare la funzione di ornato. Lo stesso vale per altre funzioni che utilizzano indici numerici, come le alternative stilistiche e i set stilistici.

Utilizzo di funzioni OpenType multiple

La proprietà font-variant è una forma abbreviata di CSS per tutte le proprietà secondarie di font-variant. Possiamo un'operazione simile a questa per attivare le legature comuni e le figure in stile antico:

Allo stesso modo, più funzioni possono essere attivate utilizzando font-feature-settings con un elenco di valori delimitato da virgole:

In entrambi i casi, i valori ereditati vengono completamente sovrascritti e il supporto del browser può variare. Tieni presente che i valori font-variant a volte sono stati progettati per attivare più funzioni contemporaneamente (consulta maiuscolo a maiuscoletto).

Risorse

Se sei pronto per iniziare a creare stili con CSS, crea un segnalibro per il glossario della sintassi delle funzioni OpenType utilizzate di frequente