OpenType-SVG-värikirjasimet

OpenType-SVG on kirjasinformaatti, jossa OpenType-kirjasimessa on kaikki tai vain osa sen merkeistä esitetty SVG-kuvana (skaalautuva vektorikuva). Tämä mahdollistaa useiden värien ja liukuvärien näyttämisen yhdessä merkissä. Näiden ominaisuuksien vuoksi kutsumme OpenType-SVG-kirjasimia myös värikirjasimiksi.

OpenType-SVG-kirjasimet mahdollistavat tekstin näyttämisen näillä graafisilla ominaisuuksilla, mutta silti tekstiä voi muokata, indeksoida tai hakea. Ne voivat sisältää myös OpenType-ominaisuuksia, jotka mahdollistavat merkkien korvaamisen tai vaihtoehtoiset merkkityylit.

Värikirjasimet, kuten Trajan Color Concept ja EmojiOne Color, näkyvät ohjelmien kirjasinvalikoissa ihan kuten tavalliset kirjasimet – mutta ne eivät ehkä näytä täyttä potentiaaliaan, koska monet ohjelmat eivät vielä tue täysin värikomponentteja. Jos ohjelmistosi ei tue kirjasimien SVG-kuvaa, merkit näytetään yksivärisenä mustana.Tälle varatyylille voi silti soveltaa väriä, koska se toimii kuten tavallinen OpenType-kirjasin.

OpenType-SVG-värikirjasimien käyttö Photoshopissa

Photoshop (CC 2017 ja uudemmat versiot) tukee OpenType-SVG-kirjasimia ja sisältää kaksi tällaista kirjasinta: Trajan Color ja EmojiOne. Trajan Color sisältyy myös verkko- ja työpöytäkäyttöön Creative Cloud -tilaukseesi.

OpenType-SVG-kirjasimien käyttäminen: noudata seuraavia vaiheita:

• Luo joko kappale- tai pistetekstitaso.
• Aseta kirjasimeksi OpenType-SVG-kirjasin. Nämä kirjasimet on merkitty kirjasinluettelossa OpenType-SVG-kuvakkeella:
  

• Kirjoita näppäimistöllä tai valitse tiettyjä kuvioita Kuviot-paneelista. Voit tarkastella Merkit-paneelia valitsemalla Ikkuna > Merkit.

Vaikka voit kirjoittaa kirjaimia yksinkertaisesti OpenType-SVG-kirjasimilla, merkkien vaihtoehtojen koko valikoima on käytettävissä vain Merkit-paneelin kautta. Trajan Color Concept sisältää esimerkiksi 20 eri tyylisettiä kullekin merkille, kuten hopea, kupari, teräksensininen ja marmori, jotka vaativat Glyphs-paneelin käyttöä.

Jos muunnat tekstitason muokattavaksi muodoksi (valitsemalla Teksti > Muunna muodoksi), OpenType-SVG-kirjasimien merkit palautuvat mustavalkoiseen varatyyliin.

OpenType-SVG-värikirjasimien käyttö Illustratorissa

Illustrator tukee OpenType SVG -kirjasimia, kuten Trajan Color ja Emoji One Color.Voit asettaa tiettyjä kuvamerkkejä Glyphs-paneelin avulla ja käyttää Glyphs-paneelia myös yhdistelmäkuvamerkkien luomiseen ja muiden merkkivariaatioiden tutkimiseen.Saat lisätietoja Illustratorin OpenType SVG -kirjasimista kohdasta Kirjasimien asetusten yleiskatsaus.

Trajan Color Concept

Trajan Color Concept on yksi Adobe Type Concepts -konsepteistamme: kirjasintyyppi, joka on kehitetty ketterällä kehitysprosessilla ja supistetuilla merkeillä, jotta voimme saada sen seikkailunhaluisten asiakkaiden eteen nopeammin palautetta varten laajentaessamme suunnittelua.

Trajan Color Concept antaa sinun valita useista (19) erilaisista väreistä ja pintakuvioista.Tällaisen yksityiskohtaisen SVG-taideteoksen käyttö erilaisten värikombinaatioiden saavuttamiseen 20 tyylisarjassa kasvattaa tiedoston kokonaiskokoa.Jos tämä kuulostaa sinusta siltä, että ne ovat hankalia käyttää, olet oikeassa — mikä on yksi syy, miksi Trajan Color katsotaan edelleen konseptifontiksi.

Oletusvärityyli (kulta) ja ensimmäiset 18 OpenType-tyylisarjaa Trajan Color Conceptissa muodostavat kaikki kirjasimessa saatavilla olevat moniväriset vaihtoehdot.Varatyyli — näkyy sovelluksissa, jotka eivät vielä tue OpenType-SVG:n väriominaisuuksia — on identtinen tyylisarjan 20 kanssa.

EmojiOne Color

Emoji-kirjasimet ovat esimerkki OpenType-SVG-kirjasimista. Käyttämällä emoji-kirjasimia voit lisätä dokumentteihin monenlaisia värikkäitä ja graafisia hahmoja, kuten hymiöitä, lippuja, tienviittoja, eläimiä, ihmisiä, ruokia ja maamerkkejä. OpenType-SVG emoji-kirjasimet, kuten EmojiOne-kirjasin, mahdollistavat tiettyjen yhdistelmämerkkien luomisen yhdestä tai useammasta muusta merkistä. Voit luoda esimerkiksi eri maiden lippuja tai vaihtaa tiettyjen oletushahmojen ja -ruumiinosien, kuten käsien, ihonvärin.

EmojiOne Color on Adoben avoimen lähdekoodin värikirjasin, joka on rakennettu EmojiOne-kuvituksesta, jonka on suunnitellut Denis Denz ja tuottanut Rick Moby. Kirjasin sisältää kaikki Unicode 9.0:n emojit ja tukee ZWJ-, ihonvärin monimuotoisuus- ja maan lippu -emojeja.

Emoji-kirjasimen merkit, kuten EmojiOne, eroavat näppäimistön kirjaimista. Ne voidaan lisätä vain Merkit-paneelin kautta, käyttöjärjestelmän kautta — Merkistökartta (Windows) ja Merkit (macOS) — tai kopioimalla tekstiä verkkosivulta, kuten emojicopy.com.

Huomautukset:

• Voit avata Merkit-paneelin myös valitsemalla Ikkuna > Workspace > Grafiikka ja verkko ja napsauttamalla sitten Merkit-välilehteä.
• Äskettäin käytetyt emojit näkyvät Merkit-paneelin ylimmällä rivillä.

Photoshopissa voit lisätä EmojiOne-merkkien sarjan tuottaaksesi muita merkkejä. Voit esimerkiksi luoda maiden lippuja tai muuttaa henkilön tai ruumiinosan ihonväriä. (Tämä ei toimi kahden tai useamman henkilön emojeissa.)

Luo maiden lippuja EmojiOnen ympyröidyt kirjaimet (A, B, C, D ja niin edelleen) eivät vastaa näppäimistön näppäimiä. Kun lisäät nämä merkit Glyphs-paneelista muodostaaksesi maan ISO-koodin, kaksi merkkiä muodostaa kyseisen maan lipun.Esimerkiksi US näyttää Yhdysvaltain lipun, GB Britannian lipun, AR Argentiinan lipun ja IN Intian lipun. Täydellinen koodiluettelo on määritelty ISO 3166-1 -standardissa.

Luo merkistön variaatioita Yhdistä yhden henkilön oletusmerkit tai ruumiinosat mihin tahansa viidestä käytettävissä olevasta Fitzpatrick-asteikon ihonsävystä (GID:t 356–360). Alkuperäinen oletusmerkki korvataan ihonsävyä vastaavalla merkillä. Tällaiset yhdistelmät eivät tällä hetkellä toimi merkkien kanssa, joissa on useampi kuin yksi henkilö.  

Huomautukset:

• Yhden henkilön oletusmerkit tai ruumiinosien emojit voidaan yhdistää mihin tahansa ihonsävyn merkkiin vain kerran.
• Merkkisekvenssit ovat kirjasimen ominaisuus. Kaikki OpenType-SVG-kirjasimet eivät anna yhdistää useampia merkkejä yhden glyfin muodostamiseksi.

OpenType-SVG-kirjasimien käyttäminen CSS:n kanssa

OpenType-SVG-kirjasimet sisältävät ominaisuuksia, jotka voidaan ottaa käyttöön CSS:llä kuten muutkin OpenType-kirjasimet. Tutustu ohjeisiin OpenType-ominaisuuksien käyttäminen ja OpenType-ominaisuuksien syntaksi CSS:ssä, niin saat yleiskatsauksen näiden ominaisuuksien käyttämisestä.

Esimerkiksi Trajan Color Conceptin lisävärityylit on määritetty OpenType-ominaisuuksiksi, joita kutsutaan tyylisarjoiksi ja jotka on numeroitu 1–20 (ss01, ss02, ss03 jne.). Voit käyttää yhtä 20 tyylistä Trajan Color -kirjasimella määritettyyn tekstiin käyttämällä font-feature-settings-määritystä yhden tyylisarjan käyttämiseksi:

Selaimissa, jotka eivät tue OpenType-SVG-kirjasimia, näytetään varatyyli (identtinen tyylisarjan 20 kanssa).

Kun lisäät OpenType-SVG-verkkokirjasimia sivustollesi, muista, että niiden tiedostokoko saattaa olla tavallisia OpenType-kirjasimia suurempi, koska niihin on lisätty kaikkiin kirjasimen glyfeihiin tai vain osaan niistä liittyvät SVG-kuvat.  

Sovellukset, jotka tukevat OpenType-SVG-kirjasimia

• Photoshop, versio CC 2017 ja uudemmat
• Illustrator
  
• Firefox, versiosta 32 alkaen
• Microsoft Edge, Windows 10 Anniversary Edition ja uudemmat
• Windows 10:ssä DirectWrite- ja Direct2D-alustakomponentit mahdollistavat OpenType-SVG-tuen kaikissa sovelluksissa, jotka käyttävät näitä API:ja

Tunnetut ongelmat

Illustrator ja InDesign

OpenType-SVG-värikirjasimia käytettäessä Illustratorissa tai InDesignissa saatat kohdata seuraavia ongelmia:

• Glyfit saattavat näkyä väärissä paikoissa viennin jälkeen PDF- tai SVG-muotoon.
• Kun käytät Leikkaus-, Kierrä- tai Heijasta-tehosteita väri-SVG-kirjasimissa, tehosteet saattavat kadota tai merkit saattavat siirtyä alkuperäisistä paikoistaan glyfin ääriviivojen luomisen yhteydessä. 
• Kun määrität tekstin pystysuoraan, merkkien sijainnit saattavat näyttää erilaisilta viennin jälkeen.
• Kun asetat tekstiä spiraalikäyrälle, merkit saattavat näkyä väärin sijoitettuina.

Ohjelmistotiimit työskentelevät näiden ongelmien korjausten parissa. 

Muut resurssit

Tässä on linkkejä muihin tietolähteisiin OpenType-SVG -kirjasimien valmistelemisesta ja käyttämisestä:

• Tiedot ja määritykset OpenType-SVG-kirjasimien SVG-taulukkoa varten:
  https://www.microsoft.com/typography/otspec/svg.htm
• Työkalut ja esimerkkitiedostot OpenType-SVG -kirjasimien tekemiseen:
  https://github.com/adobe-type-tools/opentype-svg
• https://pixelambacht.nl/chromacheck/ on verkkosivu, joka tiedottaa katseluohjelman käyttäjälle selaimen tuesta eri värikkirjasimformaateille, mukaan lukien OpenType-SVG.(Lähdekoodi on osoitteessa https://github.com/RoelN/ChromaCheck)
• Vilkas keskustelu OpenType-SVG-kirjasimien luomisesta ja käytöstä TypeDrawers-foorumilla: http://typedrawers.com/discussion/comment/19442/