Guida utente Annulla

Sintassi per le funzioni OpenType in CSS

Cerca

Ultimo aggiornamento il 3 mag 2021

In questa pagina illustreremo nei dettagli le singole funzioni OpenType, con esempi specifici di ciascuna. Per una panoramica più ampia su come attivare le funzioni OpenType nei tuoi progetti Web e utilizzarle in CSS, consulta il nostro documento di aiuto sull'utilizzo delle funzioni OpenType nei CSS.

Legature

Lettere

Numeri

Set stilistici

Set stilistici 01–20 (ss##)

Script dell'Asia orientale

Varianti di larghezza

Varianti culturali

Funzioni verticali

Altro

Legature comuni/standard (liga)

Esempio di legature in azione, impostate in Warnock Pro.

Questa funzione sostituisce una sequenza di glifi con un singolo glifo, chiamato legatura, preferita per scopi tipografici. Quando attivata, questa funzione inserisce le legature che il progettista/produttore giudica dovrebbero essere utilizzate in condizioni normali.

La funzione delle legature è attivata per impostazione predefinita, il che significa che dovrebbe funzionare senza che sia necessario scrivere un CSS, ma non è attivata per impostazione predefinita in Chrome. Inoltre, non può essere disattivata in Safari (Mac o iOS). E alcune versioni di Chrome e Firefox hanno problemi con le legature che contengono spazi.

.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-ligatures, utilizza il valore common-ligatures, che attiva sia le legature comuni che quelle contestuali. Come le alternative contestuali, le legature contestuali hanno una logica condizionale incorporata che applica i glifi di sostituzione solo in situazioni specifiche. Per ottenere lo stesso effetto con font-feature-settings, usa i tag delle funzioni "liga" e "clig". Consulta anche:Sintassi per l'utilizzo di più funzioni OpenType.

.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
}

Per disattivare questa funzione, utilizzare il valore no-common-ligatures e un indice numerico pari a zero per font-feature-settings.

Alternative contestuali (calt)

Esempio di alternative contestuali in azione, impostate in Caflisch Script Pro.

Questa funzione, in situazioni specifiche, sostituisce i glifi predefiniti con forme alternative che forniscono un comportamento di unione migliore. Come le legature (sebbene non strettamente una funzione di legatura), le alternative contestuali sono comunemente usate per armonizzare le forme dei glifi con il contesto circostante.

La funzione delle alternative contestuali è attivata per impostazione predefinita, il che significa che dovrebbe funzionare senza che sia necessario scrivere un CSS, ma non è attivata per impostazione predefinita in Chrome. Inoltre, non può essere disattivata in Safari (Mac o iOS).

.class {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-ligatures, utilizza il valore contestuale. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "calt".

.class {
    font-variant-ligatures: no-contextual;
    -moz-font-feature-settings: "calt" 0;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
}

Per disattivare questa funzione, utilizzare il valore no-contextual e un indice numerico pari a zero per font-feature-settings.

Legature discrezionali (dlig)

Esempio di legature discrezionali in azione, impostato in Warnock Pro.

Questa funzione sostituisce una sequenza di glifi con un singolo glifo, (una legatura), soluzione preferita per scopi tipografici. Se attivata, questa funzione inserisce tali legature che possono essere utilizzate per effetti speciali.

.class {
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

La caratteristica delle legature discrezionali è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-ligatures , utilizza il valore discretionary-ligatures. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "dlig".

Maiuscoletto (smcp)

Esempio di maiuscoletto in azione, impostato in Warnock Pro.

Questa funzione trasforma i caratteri minuscoli in maiuscoletto.

.class {
  font-variant-caps: small-caps;
  -moz-font-feature-settings: "smcp";
  -webkit-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
}

La funzione del maiuscoletto è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-caps, utilizza il valore small-caps. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "smcp".

Tieni presente che in alcuni font, la funzione maiuscoletto può includere anche altre forme. Secondo le specifiche OpenType, la funzione smcp di OpenType "può includere formati relativi al maiuscoletto, come cifre in stile antico".

Da maiuscolo a maiuscoletto (c2sc)

Esempio di maiuscolo a maiuscoletto in azione, impostato in Warnock Pro.

Questa funzione trasforma i caratteri maiuscoli in maiuscoletto.

.class {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}

La funzione del maiuscolo in maiuscoletto è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-caps, utilizza il valoreall-small-caps, che trasforma sia i caratteri maiuscoli che quelli minuscoli in maiuscoletto. Questo comportamento ha senso, perché raramente si desidera applicare il maiuscoletto solo ai caratteri maiuscoli. Per ottenere lo stesso effetto con font-feature-settings, usa i tag delle funzioni "c2sc" e "smcp". Consulta anche:Sintassi per l'utilizzo di più funzioni OpenType.

Ornati (swsh)

Esempio di ornati in azione, impostati in Bickham Script Pro 3.

Questa funzione sostituisce i glifi dei caratteri predefiniti con i glifi degli ornati corrispondenti.

.class {
  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh";
}

La funzione di ornato è disattivata per impostazione predefinita.

Per attivarla con font-feature-settings, utilizza il tag della funzione "swsh". Notare che potrebbe esserci più di un'alternativa di ornato per un dato carattere. Per accedere agli ornati alternativi, aggiungi un indice numerico al valore:

.class {
  -moz-font-feature-settings: "swsh" 2;
  -webkit-font-feature-settings: "swsh" 2;
  font-feature-settings: "swsh" 2;
}

Questo attiverà il secondo ornato disponibile, se esiste nel font. Come è facile intuire, usare un valore di "swsh", come nel nostro primo esempio di codice, equivale a utilizzare un valore di "swsh" 1.

Per ora, ignoreremo la proprietà font-variant perché i suoi valori "nominati" (come ornato (fluido)) sono mappati agli indici swash numerici dalle definizioni CSS font-feature-value, che non sono ancora supportate in nessun browser principale.

Alternative stilistiche (salt)

Esempio di ornati in azione, impostati in Bree.

Questa funzione sostituisce i glifi dei caratteri predefiniti con alternative stilistiche. Consulta anche: set stilistici (ss##).

.class {
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}

La funzione delle alternative stilistiche è disattivata per impostazione predefinita.

Per attivarla con font-feature-settings, utilizza il tag della funzione "salt". Notare che potrebbe esserci più di un'alternativa stilistica per un dato carattere. Per accedere alle altre alternative stilistiche, aggiungi un indice numerico al valore:

.class {
  -moz-font-feature-settings: "salt" 2;
  -webkit-font-feature-settings: "salt" 2;
  font-feature-settings: "salt" 2;
}

Questo attiverà la seconda alternativa stilistica disponibile, se esiste nel font. Come è facile intuire, usare un valore di "salt", come nel nostro primo esempio di codice, equivale a utilizzare un valore di "salt" 1.

Per ora, ignoreremo la proprietà font-variant perché i suoi valori "nominati" (di cui non sono disponibili esempi validi) sono mappati agli indici numerici delle alternative stilistiche dalle definizioni CSS font-feature-value, che non sono ancora supportate in nessun browser principale.

Cifre allineate (lnum)

Esempio di cifre allineate in azione, impostate in Warnock Pro.

Questa funzione cambia i glifi numerici da cifre predefinite o in stile antico a cifre allineate. Notare che alcuni font possono contenere cifre allineate come stile di cifra predefinito, nel qual caso l'attivazione di questa funzione potrebbe non influire sullo stile dei glifi.

.class {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

La funzione delle cifre allineate è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-numeric, utilizza il valore lining-nums. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "lnum".

Cifre in stile antico (onum)

Esempio di cifre in stile antico in azione, impostate in Warnock Pro.

Questa funzione cambia i glifi numerici da cifre predefinite o allineate in cifre in stile antico. Notare che alcuni font possono contenere cifre in stile antico come stile di cifra predefinito, nel qual caso l'attivazione di questa funzione potrebbe non influire sullo stile dei glifi.

.class {
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

La funzione delle cifre in stile antico è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-numeric , utilizza il valore oldstyle-nums. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "onum".

Cifre proporzionali (pnum)

Esempio di cifre proporzionali in azione, impostate in Hypatia Sans Pro.

Questa funzione sostituisce i glifi numerici impostati su larghezze uniformi (tabulari) con i glifi corrispondenti impostati su larghezze specifiche dei glifi (proporzionali). Notare che alcuni font possono contenere cifre proporzionali per impostazione predefinita, nel qual caso l'attivazione di questa funzione potrebbe non influire sulla larghezza dei glifi.

.class {
  font-variant-numeric: proportional-nums;
  -moz-font-feature-settings: "pnum";
  -webkit-font-feature-settings: "pnum";
  font-feature-settings: "pnum";
}

La funzione delle cifre proporzionali è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-numeric, utilizza il valore proportional-nums. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "pnum".

Cifre tabulari (tnum)

Esempio di cifre tabulari in azione, impostate in Hypatia Sans Pro.

Questa funzione sostituisce i glifi numerici impostati su larghezze specifiche dei glifi (proporzionali) con i glifi corrispondenti impostati su larghezze uniformi (tabulari). Notare che alcuni font possono contenere cifre tabulari per impostazione predefinita, nel qual caso l'attivazione di questa funzione potrebbe non influire sulla larghezza dei glifi.

.class {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

La funzione delle cifre tabulari è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-numeric , utilizza il valore tabular-nums. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "tnum".

Frazioni (frac)

Esempio di frazioni in azione, impostate in Warnock Pro.

$Esempio di applicazione di frac CSS$

Questa funzione sostituisce le cifre separate da una barra con frazioni comuni (diagonali).

.class {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}

La funzione di frazione è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-numeric , utilizza il valore diagonal-fractions. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "frac".

Ordinali (ordn)

Esempio di ordinali in azione, impostati in Warnock Pro.

Questa funzione sostituisce i glifi alfabetici predefiniti con le forme ordinali corrispondenti, da utilizzare dopo le cifre.

.class {
  font-variant-numeric: ordinal;
  -moz-font-feature-settings: "ordn";
  -webkit-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
}

La funzione degli ordinali è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-numeric , utilizza il valore ordinal. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "ordn".

Notare che non tutte le sostituzioni dei glifi avvengono dopo le cifre. Secondo le specifiche OpenType, "un'eccezione alla regola follows-a-figure è il carattere numero (U+2116), che in realtà è una sostituzione della legatura, ma è preferibile accedervi tramite questa funzione."

Set stilistici (ss##)

Esempio di set stilistici in azione, impostati in Hypatia Sans Pro.

Esempio di applicazione del set stilistico CSS

Questa funzione sostituisce i set dei caratteri predefiniti con varianti stilistiche. I glifi nei set stilistici possono essere progettati per armonizzarsi visivamente, interagire in modi particolari o funzionare insieme in altro modo. Consulta anche: alternative stilistiche (salt), progettato per offrire alternative stilistiche ai singoli glifi.

.class {
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

La funzione delle set stilistici è disattivata per impostazione predefinita.

Per attivarla con font-feature-settings, utilizza il tag funzione "ss##", dove "##" è qualsiasi combinazione di due cifre da 01 a 20. Notare che i font utilizzano set stilistici in modi completamente arbitrari e personalizzati. Ad esempio, due font diversi possono utilizzare la stessa funzione (come ss01) per sostituire insiemi di glifi completamente diversi; oppure, un particolare font può usare ss01 e ss03 per sostituire set di glifi, ma ignorare ss02. Alcune aziende di servizi tipografici offrono documentazione su come sono organizzate le funzioni.

Per ora, ignoreremo la proprietà font-variant perché i suoi valori "nominati" (styleset(sharp-serifs)) sono mappati agli indici numerici dei set stilistici dalle definizioni CSS font-feature-value, che non sono ancora supportate in nessun browser principale.

Larghezze proporzionali (pwid)

Esempio di larghezza proporzionale in azione, impostata in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi impostati su larghezze uniformi (in genere full o half-em) con glifi con spaziatura proporzionale. Le varianti proporzionali sono spesso utilizzate per i caratteri latini nei font CJKV, ma possono essere utilizzate anche per Kana nei font giapponesi. (Origine.)

.class {
  font-variant-east-asian: proportional-width;
  -moz-font-feature-settings: "pwid";
  -webkit-font-feature-settings: "pwid";
  font-feature-settings: "pwid";
}

La funzione della larghezza proporzionale è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-east-asian , utilizza il valore proportional-width. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "pwid".

Larghezze alternative proporzionali (palt)

Esempio di larghezze alternative proporzionali in azione, impostate in Source Han Sans:

Questa funzione reimposta la spaziature dei glifi progettati per essere impostati su larghezze full-em, adattandole a singole larghezze orizzontali (più o meno proporzionali). Ciò differisce da pwid in quanto non sostituisce i nuovi glifi (GPOS, non la funzione GSUB). L'utente può preferire il formato monospazio o può semplicemente volersi assicurare che il glifo sia ben adattato e non ruotato in posizione verticale (le forme latine progettate per la spaziatura proporzionale verrebbero ruotate). (Origine.)

.class {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

La funzione delle larghezze alternative è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "palt".

Kana proporzionale (pkna)

Esempio di Kana proporzionale in azione, impostato in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi kana e correlati a kana su larghezze uniformi (in genere tutta larghezza o mezza larghezza) con glifi con proporzionali. È simile alla funzione delle larghezze proporzionali, ma ha effetto solo su Kana. (Origine.)

.class {
  -moz-font-feature-settings: "pkna";
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
}

La funzione Kana proporzionale è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "pkna".

Tutta larghezza (fwid)

Esempio di tutta larghezza in azione, impostata in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi impostati su altre larghezze con glifi impostati su tutta larghezza (solitamente em). In un font CJKV, questo può includere caratteri latini "lower ASCII" e vari simboli. In un font europeo, questa funzione sostituisce i glifi con spaziatura proporzionale con glifi monospazio, generalmente impostati su larghezze di 0,6 em. (Origine.)

.class {
  font-variant-east-asian: full-width;
  -moz-font-feature-settings: "fwid";
  -webkit-font-feature-settings: "fwid";
  font-feature-settings: "fwid";
}

La funzione tutta larghezza è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-east-asian, utilizza il valore full-width. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "fwid".

Mezze larghezze (hwid)

Esempio di mezze larghezze in azione, impostate in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi su larghezze proporzionali o larghezze fisse diverse da metà em, con glifi su larghezze metà em (en). Molti font CJKV hanno glifi impostati su più larghezze; questa funzione seleziona la versione half-em. Esistono vari contesti in cui questo è il comportamento preferito, inclusa la compatibilità con i documenti desktop meno recenti. (Origine.)

.class {
  -moz-font-feature-settings: "hwid";
  -webkit-font-feature-settings: "hwid";
  font-feature-settings: "hwid";
}

La funzione mezze larghezze è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "hwid".

Mezze larghezze alternative (halt)

Esempio di mezze larghezze alternative in azione, impostate in Kozuka Mincho Pr6n:

Questa funzione reimposta la spaziature dei glifi progettati per essere impostati su larghezze full-em, adattandole a larghezze half-em. Ciò differisce da hwid in quanto non sostituisce i nuovi glifi. (Origine.)

.class {
  -moz-font-feature-settings: "halt";
  -webkit-font-feature-settings: "halt";
  font-feature-settings: "halt";
}

La funzione delle mezze larghezze è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "halt".

Larghezze di un terzo (twid)

Esempio di larghezze di un terzo in azione, impostate in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi impostati su altre larghezze con glifi impostati su larghezze di un terzo di em. I caratteri coinvolti sono normalmente cifre e alcune forme di punteggiatura. (Origine.)

.class {
  -moz-font-feature-settings: "twid";
  -webkit-font-feature-settings: "twid";
  font-feature-settings: "twid";
}

La funzione larghezze di un terzo è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "twid".

Larghezze di un quarto (qwid)

Esempio di larghezza di un quarto in azione, impostata in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi impostati su altre larghezze con glifi impostati su larghezze di un quarter di em (mezzo en). I caratteri coinvolti sono normalmente cifre e alcune forme di punteggiatura. (Origine.)

.class {
  -moz-font-feature-settings: "qwid";
  -webkit-font-feature-settings: "qwid";
  font-feature-settings: "qwid";
}

La funzione larghezze di un quarto è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "qwid".

Formati JIS78 (jp78)

Esempio di formati JIS78 in azione, impostati in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi giapponesi predefiniti (JIS90) con i formati corrispondenti dalla specifica JIS C 6226-1978 (JIS78). (Origine.)

.class {
  font-variant-east-asian: jis78;
  -moz-font-feature-settings: "jp78";
  -webkit-font-feature-settings: "jp78";
  font-feature-settings: "jp78";
}

La funzione dei formati JIS78 è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-east-asian, utilizza il valore jis78. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "jp78".

Formati JIS83 (jp83)

Esempio di formati JIS83 in azione, impostati in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi giapponesi predefiniti (JIS90) con i formati corrispondenti dalla specifica JIS X 0208-1983 (JIS83). (Origine.)

.class {
  font-variant-east-asian: jis83;
  -moz-font-feature-settings: "jp83";
  -webkit-font-feature-settings: "jp83";
  font-feature-settings: "jp83";
}

La funzione dei formati JIS83 è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-east-asian, utilizza il valore jis83. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "jp83".

Formati JIS90 (jp90)

Esempio di formati JIS90 in azione, impostati in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi giapponesi delle specifiche JIS78 o JIS83 con i formati corrispondenti dalla specifica JIS X 0208-1990 (JIS90). (Origine.)

.class {
  font-variant-east-asian: jis90;
  -moz-font-feature-settings: "jp90";
  -webkit-font-feature-settings: "jp90";
  font-feature-settings: "jp90";
}

La funzione dei formati JIS90 è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-east-asian, utilizza il valore jis90. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "jp90".

Formati JIS2004 (jp04)

Esempio di formati JIS2004 in azione, impostati in Kozuka Mincho Pro:

Il National Language Council (NLC) del Giappone ha definito nuove forme di glifo per un certo numero di caratteri JIS, che sono stati incorporati in JIS X 0213:2004 come nuove forme prototipiche. La funzione "jp04" è un sottoinsieme della funzione "nlck" e viene utilizzata per accedere a questi glifi prototipici in modo da mantenere l'integrità di JIS X 0213:2004. (Origine.)

.class {
  font-variant-east-asian: jis04;
  -moz-font-feature-settings: "jp04";
  -webkit-font-feature-settings: "jp04";
  font-feature-settings: "jp04";
}

La funzione dei formati JIS2004 è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-east-asian, utilizza il valore jis04. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "jp04".

Formati tradizionali (trad)

Esempio di formati tradizionali in azione, impostati in Kozuka Mincho Pr6n:

Sostituisce i formati hanzi cinesi "semplificati" o kanji giapponesi con i corrispondenti formati "tradizionali". (Origine.)

.class {
  font-variant-east-asian: traditional;
  -moz-font-feature-settings: "trad";
  -webkit-font-feature-settings: "trad";
  font-feature-settings: "trad";
}

La funzione dei formati tradizionali è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-east-asian, utilizza il valore traditional. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "trad".

Formati Ruby Notation (ruby)

Esempio di formati ruby notation in azione, impostati in Kozuka Mincho Pr6n:

La composizione tipografica giapponese spesso utilizza glifi kana più piccoli, generalmente in forma in apice, per chiarire il significato di kanji che potrebbe non essere familiare al lettore. Questi sono chiamati ruby, dal vecchio termine di composizione tipografica per il carattere four-point-sized. Questa funzione identifica i glifi nel font che sono stati progettati per questo uso, sostituendoli con le progettazioni predefinite. (Origine.)

.class {
  font-variant-east-asian: ruby;
  -moz-font-feature-settings: "ruby";
  -webkit-font-feature-settings: "ruby";
  font-feature-settings: "ruby";
}

La funzione dei moduli di ruby notation è disattivata per impostazione predefinita. Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-east-asian, utilizza il valore ruby. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "ruby".

Si noti l'elemento rt che stiamo disegnando, nell'esempio di codice precedente. Markup corretto per il testo ruby è spiegato nella specifica HTML5 del W3C, nella sezione sulla semantica a livello di testo. Si noti inoltre che la posizione e la dimensione del testo Ruby varierà a seconda dei browser/versioni; considera la possibilità di disattivare le impostazioni predefinite del browser con un'operazione di reimpostazione foglio di stile e ridimensionando/posizionando manualmente il testo Ruby.

Alternative kana orizzontali (hkna)

Esempio di alternative kana orizzontali in azione, impostato in Kozuka Mincho Pr6n:

Questa funzione sostituisce il kana standard con formati appositamente progettati per la sola scrittura orizzontale. Questa è un'ottimizzazione tipografica per un migliore adattamento e un colore più uniforme. (Origine.)

.class {
  -moz-font-feature-settings: "hkna";
  -webkit-font-feature-settings: "hkna";
  font-feature-settings: "hkna";
}

La funzione alternative kana orizzontali è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "hkna".

Formati NLC Kanji (nlck)

Esempio di formati NLC kanji in azione, impostati in Kozuka Mincho Pr6n:

Il National Language Council (NLC) del Giappone ha definito nuove forme di glifi per un certo numero di caratteri JIS nel 2000. La funzione "nlck" viene utilizzata per accedere a questi glifi. (Origine.)

.class {
  -moz-font-feature-settings: "nlck";
  -webkit-font-feature-settings: "nlck";
  font-feature-settings: "nlck";
}

La funzione dei formati NLC kanji è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "nlck".

Formati di annotazione alternativi (nalt)

Esempio di formati di annotazione alternativi in azione, impostati in Kozuka Mincho Pr6n:

Questa funzione sostituisce i glifi predefiniti con varie formati di annotazione (ad esempio glifi posizionati in cerchi aperti o pieni, quadrati, parentesi, rombi o riquadri arrotondati). In alcuni casi potrebbe essere già presente un formato di annotazione, ma l'utente potrebbe volerne uno diverso. (Origine.)

.class {
  -moz-font-feature-settings: "nalt";
  -webkit-font-feature-settings: "nalt";
  font-feature-settings: "nalt";
}

La funzione dei formati di annotazione alternativi è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "nalt".

Corsivo (ital)

Esempio di formati corsivo in azione, impostati in Kozuka Mincho Pr6n:

Alcuni font (come i font giapponesi Pro di Adobe) avranno formati sia romani che corsivi di alcuni caratteri in un singolo font. Questa funzione sostituisce i glifi romani con i glifi in corsivo corrispondenti. (Origine.)

.class {
  -moz-font-feature-settings: "ital";
  -webkit-font-feature-settings: "ital";
  font-feature-settings: "ital";
}

La funzione corsivo è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "ital".

Nota sulle funzioni verticali

Le seguenti funzioni di OpenType aiutano a migliorare l'aspetto del testo orientato verticalmente reimpostando la spaziatura e sostituendo i glifi. Tuttavia, il supporto del browser per l'orientamento verticale è limitato. Quindi, sebbene queste funzioni OT possano essere supportate e funzionare correttamente, se l'orientamento verticale non è supportato e funziona correttamente, queste funzioni non hanno importanza.

.class {
  direction: rtl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

Il nostro codice qui è basato su Modalità di scrittura CSS Level 3 Editor's Draftdi W3C e su questa fantastica ricerca di David Storey. Puoi vedere come sta prendendo forma... ma il supporto del browser al momento non è disponibile. Abbiamo testato il codice precedente e la modalità di scrittura ha funzionato solo in Chrome.

Crenatura verticale (vkrn)

Questa funzione regola la quantità di spazio tra i glifi, generalmente per fornire una spaziatura otticamente coerente tra i glifi. Sebbene un carattere ben progettato abbia una spaziatura tra i glifi nel complesso coerente, alcune combinazioni di glifi richiedono una regolazione per una migliore leggibilità. Oltre alla regolazione standard nella direzione verticale, questa funzione può fornire dati di crenatura dipendenti dalle dimensioni tramite tabelle dei dispositivi, crenatura "cross-stream" nella direzione del testo X e regolazione del posizionamento dei glifi indipendentemente dalla regolazione dell'avanzamento. Notare che questa funzione può essere applicata a sequenze di più di due glifi e non dovrebbe essere utilizzata nei font monospazio. Notare inoltre che questa funzione si applica solo al testo impostato verticalmente. (Origine.)

.class {
  -moz-font-feature-settings: "vkrn", "vpal";
  -webkit-font-feature-settings: "vkrn", "vpal";
  font-feature-settings: "vkrn", "vpal";
}

La funzione crenatura verticale è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. E, sebbene questa funzione può essere supportata in Firefox, il testo verticale non è supportato, quindi in effetti non è supportata. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "vkrn". Se vkrn è attivato, anche vpal deve essere attivato, se esiste. Consultare anche: Sintassi per l'utilizzo di più funzioni OpenType e Nota sulle funzioni verticali.

Alternative verticali (vert)

Questa funzione sostituisce i formati predefiniti con varianti regolate per la scrittura verticale nella modalità di scrittura verticale. Mentre la maggior parte dei glifi CJKV rimangono verticali quando impostati in modalità di scrittura verticale, alcuni assumono una forma diversa (di solito ruotati e riposizionati) per questo scopo. I glifi coperti da questa funzione corrispondono al set normalmente ruotato nelle applicazioni DTP di fascia bassa. (Origine.)

La funzione delle alternative verticali è attivata per impostazione predefinita, il che significa che dovrebbe funzionare senza che sia necessario scrivere un CSS, ma non è attivata per impostazione predefinita in nessuna versione di IE o Firefox. Inoltre, non può essere assolutamente attivata in Safari (Mac o iOS). Consultare anche: Nota sulle funzioni verticali.

.class {
  -moz-font-feature-settings: "vert";
  -webkit-font-feature-settings: "vert";
  font-feature-settings: "vert";
}

L'unico modo per attivare la funzione delle alternative verticali è con font-feature-settings, utilizzando il tag della funzione "vert".

Metriche alternative verticali proporzionali (vpal)

Questa funzione reimposta la spaziature dei glifi progettati per essere impostati su altezze full-em, adattandole a singole altezze verticali (più o meno proporzionali). Ciò differisce da valt in quanto non sostituisce i nuovi glifi (GPOS, non la funzione GSUB). L'utente può preferire il formato monospazio o può semplicemente volersi assicurare che il glifo sia ben adattato. (Origine.)

.class {
  -moz-font-feature-settings: "vpal";
  -webkit-font-feature-settings: "vpal";
  font-feature-settings: "vpal";
}

La funzione delle metriche alternative verticali proporzionali è disattivata per impostazione predefinita e non è supportata in IE o in nessuna versione di Safari su Mac OS o iOS. E, sebbene questa funzione può essere supportata in Firefox, il testo verticale non è supportato, quindi in effetti non è supportata. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "vpal". Consultare anche: Nota sulle funzioni verticali.

Alternative mezza metrica verticale (vhal)

Questa funzione reimposta la spaziature dei glifi progettati per essere impostati su altezze full-em, adattandole ad altezze half-em. (Origine.)

.class {
  -moz-font-feature-settings: "vhal";
  -webkit-font-feature-settings: "vhal";
  font-feature-settings: "vhal";
}

La funzione delle alternative mezza metrica verticale è disattivata per impostazione predefinita e non è supportata in nessuna versione di IE, Firefox o Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "vhal". Consultare anche: Nota sulle funzioni verticali.

Alternative Kana verticali (vkna)

Questa funzione sostituisce il kana standard con formati appositamente progettati per la sola scrittura verticale. Questa è un'ottimizzazione tipografica per un migliore adattamento e un colore più uniforme. Consultare anche hkna. (Origine.)

.class {
  -moz-font-feature-settings: "vkna";
  -webkit-font-feature-settings: "vkna";
  font-feature-settings: "vkna";
}

La funzione alternative kana verticali è disattivata per impostazione predefinita e non è supportata in nessuna versione di Safari su Mac OS o iOS. L'unico modo per attivarla è con font-feature-settings, utilizzando il tag della funzione "vkna". Consultare anche. Nota sulle funzioni verticali.

Crenatura (kern)

Esempio di crenatura in azione, impostata in Source Sans Pro:

.class {
  font-kerning: normal;
  -moz-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

La funzione di crenatura è disattivata per impostazione predefinita, ma in molti casi è importante attivarla.

Per attivarla con la proprietà font-kerning, usare il valore normal. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "kern".

Composizione/Scomposizione glifo (ccmp)

Esempio di composizione/Scomposizione glifo, impostato in Source Han Sans:

Per ridurre al minimo il numero di alternative di glifi, a volte si desidera scomporre un carattere in due glifi. Inoltre, potrebbe essere preferibile comporre due caratteri in un unico glifo per una migliore elaborazione dei glifi. Questa funzione permette tale composizione/scomposizione. La funzione deve essere elaborata come la prima funzione elaborata e deve essere elaborata solo quando viene richiamata. (Origine.)

La funzione di composizione/scomposizione glifo è attivata per impostazione predefinita, il che significa che dovrebbe funzionare senza che si debba scrivere un CSS, ma ci sono alcune condizioni da verificare per assicurare che sia attivata. Questa funzione non è attivata per impostazione predefinita in Chrome o Safari, ma l'utilizzo di qualsiasi valore di font-feature-settings la attiverà.

.class {
  -moz-font-feature-settings: "ccmp";
  -webkit-font-feature-settings: "ccmp";
  font-feature-settings: "ccmp";
}

Per assicurarti che la funzione di composizione/scomposizione dei glifi sia attivata, utilizza esplicitamente il tag della funzione "ccmp" o qualsiasi altro valore di font-feature-settings.

Formati localizzati (locl)

Molti script utilizzati per scrivere più lingue su vaste aree geografiche hanno sviluppato formati varianti localizzati di lettere specifiche, che vengono utilizzate dalle singole comunità letterarie. Ad esempio, un certo numero di lettere negli alfabeti bulgaro e serbo hanno formati distinti rispetto alle loro controparti russe e le une dalle altre. In alcuni casi il formato localizzato differisce solo leggermente dalla "normale" scrittura, in altri i formati sono radicalmente diversi. Questa funzione consente di sostituire i formati localizzati di glifi con i formati predefiniti. (Origine.)

La funzione dei formati localizzati è attivata per impostazione predefinita, il che significa che dovrebbe funzionare senza che sia necessario scrivere un CSS, ma in realtà è attivata per impostazione predefinita solo in Firefox e non è assolutamente supportata in Safari (Mac o iOS) o su Android.

.class {
  -moz-font-feature-settings: "locl";
  -webkit-font-feature-settings: "locl";
  font-feature-settings: "locl";
}

Per assicurarti che la funzione dei formati localizzati sia attivata, utilizza esplicitamente il tag della funzione "locl".

Apice (sups)

Esempio di apice in azione, impostato in Hypatia Sans Pro.

Questa funzione sostituisce le cifre allineate o in stile antico con cifre in alto (principalmente per l'indicazione delle note a piè di pagina) e sostituisce le lettere minuscole con lettere in alto (principalmente per i titoli francesi abbreviati).

.class {
  font-variant-position: super;
  -moz-font-feature-settings: "sups";
  -webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}

La funzione apice è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-position , utilizza il valore super. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "sups".

Pedice (subs)

Esempio di pedice in azione, impostate in Warnock Pro.

Questa funzione può sostituire un glifo predefinito con un glifo in pedice oppure può combinare una sostituzione del glifo con regolazioni di posizionamento per un posizionamento corretto.

.class {
  font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
}

La funzione pedice è disattivata per impostazione predefinita.

Per attivarla con la proprietà font-variant o la proprietà secondaria font-variant-position, utilizza il valore sub. Per ottenere lo stesso effetto con font-feature-settings, usa il tag delle funzioni "subs".