Font a colori OpenType-SVG

OpenType-SVG è un formato di font in cui un font OpenType ha tutti o solo alcuni dei suoi glifi rappresentati come grafica SVG (grafica vettoriale scalabile). Ciò consente la visualizzazione di più colori e sfumature in un unico glifo. A causa di queste funzioni, ci riferiamo anche ai font OpenType-SVG come "font a colori".

I font OpenType-SVG consentono di visualizzare il testo con queste qualità grafiche, pur consentendo la modifica, l'indicizzazione o la ricerca. Possono anche contenere funzioni OpenType che consentono la sostituzione dei glifi o stili di glifi alternativi.

I font a colori come Trajan Color Concept ed EmojiOne Color appariranno proprio come i font tipici nei menu dei font dei tuoi programmi, ma potrebbero non mostrare il loro pieno potenziale, poiché molti programmi non hanno ancora il supporto completo per i componenti del colore. Se il programma software non supporta la grafica SVG all'interno dei font, i glifi torneranno a uno stile nero pieno. Il colore può ancora essere applicato a questo stile alternativo, poiché funzionerà come un tipico font OpenType.

Photoshop (CC 2017 e versioni più recenti) supporta i font SVG OpenType e viene fornito con due di questi font: Trajan Color ed EmojiOne. Trajan Color è incluso anche per l'utilizzo su Web e desktop con l'abbonamento a Creative Cloud.

Per usare i font SVG-OpenType, effettua le seguenti operazioni:

• Crea un paragrafo o un livello di testo indipendente.
• Imposta il font su un font SVG-OpenType. Questi font sono contrassegnati nel font con l'icona OpenType-SVG:
  

• Digitare utilizzando la tastiera o selezionare glifi specifici dal pannello Glifi. Per visualizzare il pannello Glifi, selezionare Finestra > Glifi.

Anche se è possibile digitare semplicemente le lettere con font SVG OpenType, l’intera gamma delle alternative dei glifi è disponibile solo tramite il Pannello Glifi. Il font Trajan Color Concept, ad esempio, include 20 diversi set stilistici per ogni carattere, come argento, rame, blu acciaio e marmo, che richiedono il pannello Glifi per l'accesso.

Se converti un livello di testo in una forma modificabile (selezionando Tipo> Converti in forma), i caratteri dei font OpenType-SVG torneranno allo stile alternativo in bianco e nero.

Utilizzo dei font a colori OpenType-SVG in Illustrator

Illustrator supporta i font SVG OpenType come Trajan Color ed Emoji One Color. Puoi impostare glifi specifici utilizzando il pannello Glifi e puoi anche utilizzare il pannello Glifi per creare glifi compositi ed esplorare altre varianti di carattere. Per ulteriori informazioni sui font OpenType SVG in Illustrator, consulta https://helpx.adobe.com/illustrator/using/fonts.html#OpenTypeSVGfonts.

Trajan Color Concept

Trajan Color Concept è uno dei quattro Adobe Type Concepts: un carattere sviluppato con un processo agile e in versione ridotta, per poterlo fornire durante le fasi iniziali ai clienti che amano le novità e ricevere così feedback durante l’avanzamento della progettazione.

Trajan Color Concept ti consente di scegliere tra molti (19) diversi colori e texture. L'uso di grafica SVG così dettagliata per accedere a diverse combinazioni di colori nei 20 set stilistici aumenta la dimensione complessiva del file. Se ti sembra che questo li renda difficili da usare hai ragione, questo è uno dei motivi per cui Trajan Color è ancora considerato un font concept.

Lo stile di colore predefinito (Oro) e i primi 18 set stilistici OpenType in Trajan Color Concept compongono tutte le opzioni multicolore disponibili nel font. Lo stile alternativo, visto nelle applicazioni che non supportano ancora le funzioni di colore di OpenType-SVG, è identico al set stilistico 20.

EmojiOne Color

I font Emoji sono un esempio di font SVG-OpenType. Con i font Emoji, è possibile includere vari caratteri grafici e colorati, come ad esempio faccine, bandiere, cartelli, animali, persone, cibi, punti di riferimento, e così via nei documenti. I font emoji SVG-OpenType, come il font EmojiOne, consentono di creare alcuni glifi composti partendo da uno o più glifi. Ad esempio, è possibile creare le bandiere dei paesi o cambiare il colore della pelle di determinati glifi che rappresentano persone o parti del corpo come mani e naso.

EmojiOne Color è un font a colori open source creato da Adobe dalla grafica EmojiOne progettata da Denis Denz e prodotto da Rick Moby. Il font contiene tutte le emoji in Unicode 9.0 e include il supporto per l'emoji ZWJ, diversità del tono della pelle e bandiera del paese.

I caratteri in un font emoji, come EmojiOne, sono distinti dalle lettere della tastiera. Possono essere inseriti solo tramite il pannello Glifi, tramite il sistema operativo, Charmap (Windows) e Characters (macOS), o copiando del testo da una pagina online come emojicopy.com.

Note:

• Puoi anche aprire il pannello Glifi selezionando Finestra > Area di lavoro > Grafica e Web, quindi facendo clic sulla scheda Glifi.
• Gli emoji usati di recente appaiono nella riga superiore del pannello Glifi.

In Photoshop, puoi inserire una sequenza di glifi EmojiOne per produrre altri glifi. Ad esempio, è possibile creare le bandiere dei paesi o cambiare il colore della pelle o parti del corpo di una singola persona. (Questo non funzionerà su emoji di due o più persone.)

Creare bandiere di paesi. Le lettere cerchiate (A, B, C, D e così via) in EmojiOne non corrispondono ai tasti sulla tastiera. Quando si inseriscono questi caratteri dal pannello Glifi per creare il codice ISO di un paese, i due caratteri formano la bandiera di quel paese. Ad esempio, scrivendo US compare la bandiera americana, con GB compare la bandiera inglese, con AR la bandiera argentina e con IN la bandiera indiana. L'elenco completo dei codici è definito da ISO 3166-1.

Creare varianti di personaggi. Combina caratteri predefiniti di una singola persona o parti del corpo con una delle cinque tonalità della pelle disponibili nella Scala di Fitzpatrick (GID da 356 a 360). Il carattere predefinito originale viene sostituito da uno che corrisponde al tono della pelle. Tali compositi attualmente non funzionano con i glifi che comprendono più di una persona.  

Note:

• I caratteri predefiniti a persona singola o le emoji delle parti del corpo possono essere abbinati a uno qualsiasi dei caratteri della tonalità della pelle solo una volta.
• Le sequenze di glifi sono una funzione dei font. Non tutti i font OpenType-SVG consentono di combinare più caratteri per formare un unico glifo.

Utilizzo di font OpenType-SVG con CSS

I font OpenType-SVG contengono funzioni che possono essere attivate tramite CSS come altri font OpenType. Fare riferimento a Utilizzo delle funzioni OpenType e a Sintassi per le funzioni OpenType in CSS per una panoramica relativa all'accesso a queste funzioni.

Gli stili di colore aggiuntivi in Trajan Color Concept, ad esempio, sono impostati come funzioni OpenType chiamate set stilistici, numerati da 1 a 20 (ss01, ss02, ss03 e così via). Per applicare uno dei 20 stili al testo impostato in Trajan Color, puoi utilizzare font-feature-settings per applicare uno dei set stilistici:

Nei browser che non supportano i font OpenType-SVG, verrà visualizzato lo stile alternativo (identico al set stilistico 20).

Quando aggiungi font per web OpenType-SVG al tuo sito, tieni presente che potrebbero avere file di dimensioni maggiori rispetto ai normali font OpenType, a causa dell'aggiunta di grafica SVG associata a tutti o solo ad alcuni dei glifi nel font.  

Applicazioni che supportano i font OpenType-SVG

• Photoshop, versione CC 2017 e successive
• Illustrator
  
• Firefox, versione 32 e successive
• Microsoft Edge, Windows 10 Anniversary Edition e versioni successive
• In Windows 10, i componenti della piattaforma DirectWrite e Direct2D consentono il supporto OpenType-SVG in tutte le app che utilizzano tali API

Problemi noti

Illustrator e InDesign

Potresti riscontrare i seguenti problemi quando utilizzi i font a colori OpenType-SVG in Illustrator o InDesign:

• I glifi potrebbero apparire nelle posizioni sbagliate dopo l'esportazione in PDF o SVG.
• Quando si applicano gli effetti Trasparente, Ruota o Riflesso su font SVG a colori, gli effetti potrebbero andare persi o i caratteri potrebbero spostarsi dalle posizioni originali quando vengono creati i contorni del glifo. 
• Quando si imposta il testo verticalmente, le posizioni dei caratteri potrebbero apparire diverse dopo l'esportazione.
• Quando si imposta il testo su un posizionamento di percorso a spirale, i caratteri potrebbero apparire posizionati in modo errato.

I team del software stanno lavorando per risolvere questi problemi. 

Altre risorse

Di seguito sono riportati alcuni collegamenti ad altre origini di informazioni sulla preparazione e l'utilizzo dei font OpenType-SVG:

• Dettagli e specifiche per la tabella SVG nei font OpenType-SVG:
  https://www.microsoft.com/typography/otspec/svg.htm
• Strumenti e file di esempio per creare font OpenType-SVG:
  https://github.com/adobe-type-tools/opentype-svg
• https://pixelambacht.nl/chromacheck/ è una pagina Web che informerà il visualizzatore del supporto del browser su diversi formati di font a colori, incluso OpenType-SVG. (Il codice origine si trova all'indirizzo https://github.com/RoelN/ChromaCheck)
• Una vivace discussione sulla preparazione e l'uso dei font OpenType-SVG sul forum TypeDrawers: http://typedrawers.com/discussion/comment/19442/