OpenType-SVG-färgfonter

OpenType-SVG är ett teckensnitt-format där ett OpenType-typsnitt har alla eller bara några av sina glyfer representerade som SVG-konstverk (skalbar vektorgrafik). Detta möjliggör visning av flera färger och övertoningar i en enda glyf.På grund av dessa funktioner kallar vi också OpenType-SVG-typsnitt för "färgtypsnitt".

OpenType-SVG-typsnitt gör att text kan visas med dessa grafiska kvaliteter, samtidigt som den fortfarande kan redigeras, indexeras eller sökas igenom. De kan också innehålla OpenType-funktioner som möjliggör glyfersättning eller alternativa glyferstilar.

Färgtypsnitt som Trajan Color Concept och EmojiOne Color visas precis som vanliga typsnitt i dina programs typsnitt-menyer — men de kanske inte visar sin fulla potential, eftersom många program ännu inte har fullt stöd för färgkomponenterna. Om ditt program inte stöder SVG-grafiken i typsnitten kommer glyferna att återgå till en helt svart stil.Färg kan fortfarande tillämpas på denna reservstil, eftersom den fungerar som ett vanligt OpenType-typsnitt.

Använd OpenType-SVG-färgtypsnitt i Photoshop

Photoshop (CC 2017 och nyare versioner) stöder OpenType-SVG-typsnitt och kommer med två sådana typsnitt: Trajan Color och EmojiOne. Trajan Color ingår också för användning på webben och skrivbordet med din Creative Cloud-prenumeration.

Följ de här stegen för att använda OpenType-SVG-typsnitt:

• Skapa ett stycke- eller textlager.
• Ställ in typsnittet till ett OpenType-SVG-typsnitt. Dessa typsnitt är markerade i fontlistan med OpenType-SVG-ikonen:
  

• Använd tangentbordet till att skriva eller välj specialtecken med hjälp av panelen Specialtecken. För att visa Glyfer panel, välj Fönster > Glyfer.

Även om du helt enkelt kan skriva bokstäver med OpenType-SVG-typsnitt, är det fullständiga utbudet av glyfalternativ endast tillgängligt genom Glyfer panel. Trajan Color Concept, till exempel, innehåller 20 olika stilistiska uppsättningar för varje tecken, såsom Silver, Copper, Steel Blue och Marble, som kräver Glyphs-panelen för åtkomst.

Om du konverterar ett textlager till en redigerbar form (genom att välja Text > Konvertera till form), kommer tecken från OpenType-SVG-typsnitt att återgå till sin svartvita reservstil.

Använda OpenType-SVG färgtypsnitt i Illustrator

Illustrator stöder OpenType SVG-typsnitt som Trajan Color och Emoji One Color.Du kan ange specifika glyfer med panelen Glyfer, och du kan också använda panelen Glyfer för att skapa sammansatta glyfer och utforska andra teckenvarianter.Mer information om OpenType SVG-teckensnitt i Illustrator finns i Översikt över teckensnittsalternativ.

Trajan Color Concept

Trajan Color Concept är ett av våra Adobe Type Concepts: ett teckensnitt som utvecklats med en flexibel utvecklingsprocess och en nedskalad teckenuppsättning så att vi kan få det framför äventyrliga kunder tidigare för feedback medan vi utvecklar designen.

Trajan Color Concept låter dig välja mellan många (19) olika färger och texturer.Användningen av så mycket detaljerad SVG-grafik för att komma åt olika färgkombinationer i de 20 stilistiska uppsättningarna ökar den totala filstorleken.(Om det låter för dig som att det gör dem utmanande att använda, skulle du ha rätt — vilket är en anledning till varför Trajan Color fortfarande betraktas som ett konceptteckensnitt.)

Standardfärgstilen (Guld) och de första 18 OpenType-stilistuppsättningarna i Trajan Color Concept utgör alla flerfärgalternativ som finns tillgängliga i typsnittet.Reservstilen — som visas i program som ännu inte stöder färgfunktionerna i OpenType-SVG — är identisk med stilistisk uppsättning 20.

EmojiOne Color

Emoji-teckensnitt är ett exempel på OpenType-SVG-teckensnitt.Med hjälp av Emoji-teckensnitt kan du inkludera en mängd färgstarka och grafiska tecken i dina dokument, till exempel känslolägesikoner, flaggor, vägskyltar, djur, människor, mat, landmärken osv. OpenType-SVG emoji-teckensnitt, som EmojiOne-teckensnittet, låter dig skapa vissa sammansatta glyfer från en eller flera andra glyfer.Du kan till exempel skapa flaggor för länder eller ändra hudfärgen på vissa specialtecken som föreställer människor, och kroppsdelar som händer och näsor.

EmojiOne Color är ett färgteckensnitt med öppen källkod som skapats av Adobe från EmojiOne-grafiken designad av Denis Denz och producerad av Rick Moby.Fontet innehåller alla emoji i Unicode 9.0 och inkluderar stöd för ZWJ, hudtonsmångfald och landsflaggor emoji.

Tecken i ett emoji-font, som EmojiOne, skiljer sig från bokstäverna på ditt tangentbord. De kan bara infogas genom Glyphs-panelen, genom operativsystemet – Charmap (Windows) och Tecken (macOS) – eller genom att kopiera text från en webbsida som emojicopy.com.

Anteckningar:

• Du kan också öppna panelen Glyfer genom att välja Fönster > Workspace > Grafik och webb och sedan klicka på fliken Glyfer.
• Nyligen använda emoji visas på översta raden av Glyfpanelen.

I Photoshop kan du infoga en sekvens av EmojiOne-glyfer för att skapa andra glyfer. Du kan till exempel skapa flaggor för länder eller ändra hudfärg på en enskild person eller kroppsdel. (Detta fungerar inte på emoji med två eller fler personer.)

Skapa flaggor för länder De inringade bokstäverna (A, B, C, D och så vidare) i EmojiOne motsvarar inte tangenterna på tangentbordet. När du infogar dessa tecken från Glyphs-panelen för att bilda ett lands ISO-kod, bildar de två tecknen flaggan för det landet.US genererar till exempel USA:s flagga, GB Storbritanniens flagga, AR Argentinas flagga och IN Indiens flagga. Den kompletta listan över koder definieras av ISO 3166-1.

Skapa teckenvarianter Kombinera ensamstående standardtecken eller kroppsdelar med någon av de fem tillgängliga Fitzpatrick-skalans hudtonerna (GID 356 till 360). Det ursprungliga standardtecknet ersätts av ett som matchar hudtonen. Sådana sammansättningar fungerar för närvarande inte med glyfer som har mer än en person.  

Obs!

• Standardtecknen för enstaka personer eller kroppsdelar-emoji kan endast paras ihop med någon av hudtonstecknen en gång.
• Glyfssekvenser är en typsnittsfunktion. Inte alla OpenType-SVG-typsnitt låter dig kombinera flera tecken för att bilda en enda glyf.

Använda OpenType-SVG-typsnitt med CSS

OpenType-SVG-typsnitt innehåller funktioner som kan aktiveras via CSS på samma sätt som andra OpenType-typsnitt.Se Använda OpenType-funktioner och Syntax för OpenType-funktioner i CSS för en översikt över hur du kommer åt dessa funktioner.

De extra färgstilarna i Trajan Color Concept är till exempel uppställda som OpenType-funktioner som kallas stilistiska uppsättningar, som är numrerade 1 till 20 (ss01, ss02, ss03, osv.). För att tillämpa en av de 20 stilarna på text som är satt i Trajan Color kan du använda font-feature-settings för att tillämpa en av de stilistiska uppsättningarna:

I webbläsare som inte stöder OpenType-SVG-typsnitt visas reservstilen (identisk med stilistisk uppsättning 20).

När du lägger till OpenType-SVG-webbtypsnitt på din plats ska du tänka på att de kan ha större filstorlek än vanliga OpenType-typsnitt, på grund av tillägg av SVG-grafik som är associerad med alla eller bara vissa av glyferna i typsnittet.  

Applikationer som stöder OpenType-SVG-typsnitt

• Photoshop, version CC 2017 och senare
• Illustrator
  
• Firefox, version 32 och senare
• Microsoft Edge, Windows 10 Anniversary Edition och senare
• I Windows 10 tillåter plattformskomponenterna DirectWrite och Direct2D OpenType-SVG-stöd i alla appar som använder dessa API:er

Kända fel

Illustrator och InDesign

Du kan stöta på följande problem när du använder OpenType-SVG-färgtypsnitt i Illustrator eller InDesign:

• Glyfer kan visas på fel positioner efter export till PDF eller SVG.
• När du tillämpar effekterna Skjuvning, Rotering eller Spegling på färg-SVG-typsnitt kan effekterna gå förlorade eller tecknen kan flyttas bort från sina ursprungliga positioner när glyfkonturer skapas. 
• När du anger text vertikalt kan tecknens positioner se annorlunda ut efter export.
• När du ställer in text på en spiralvägsplacering kan tecken visas felaktigt placerade.

Programvaruteamen arbetar med korrigeringar av dessa problem. 

Andra resurser

Här är några länkar till andra informationskällor om att förbereda och arbeta med OpenType-SVG-typsnitt:

• Detaljer och specifikationer för SVG-tabellen i OpenType-SVG-typsnitt:
  https://www.microsoft.com/typography/otspec/svg.htm
• Verktyg och exempelfiler för att skapa OpenType-SVG font:
  https://github.com/adobe-type-tools/opentype-svg
• https://pixelambacht.nl/chromacheck/ är en webbsida som informerar användaren om webbläsarens stöd för olika färgteckensnittformat, inklusive OpenType-SVG.(Källkoden finns på https://github.com/RoelN/ChromaCheck)
• En livlig diskussion om förberedelser och användning av OpenType-SVG font på TypeDrawers-forumet: http://typedrawers.com/discussion/comment/19442/