Hur du skapar ditt eget typsnitt för Windows. Hur man skapar ett eget handskrivet typsnitt. FontCreator på ryska - skapa teckensnitt

Hej alla.
För inte så länge sedan, för att bli antagen till proven, stötte vi på ett problem - alla som hade missat lektionerna var tvungna att lämna in uppsatser skrivna för hand. För 1-2 pass 1 uppsats, 2-5 pass 2 uppsatser, och så vidare. Varje abstrakt är minst 10 ark. Att hitta ett abstrakt om ett ämne på Internet är inte svårt, men hur kan du överföra det hela till papper med minsta ansträngning?Många ryska handskrivna typsnitt hittades på Internet (länk). Men efter att ha laddat ner flera kopior av dessa typsnitt blev det klart att ingen skulle tro på äktheten av det som skrevs, och enkel kontroll Jag kan inte komma förbi läraren när han ber mig skriva något med samma handstil.Därför beslutades det gör ditt eget handskrivna typsnitt. Men hur man gör ett teckensnitt från din handstil så att ingen kunde urskilja honom, och du kunde lugnt demonstrera att det var du som skrev?
Lösningen har hittats - det underbara programmet High-Logic FontCreator Professional 9

Handstil teckensnitt


Vi installerar Font Creator, jag tycker att det inte ska vara några problem med detta.

  1. På ett rent vitt pappersark skriver vi alla siffror, bokstäver i det ryska och engelska alfabetet, såväl som speciella. symboler.


  1. Vi skannar (helst) eller fotograferar det resulterande alfabetet.

  2. I Paint, Photoshop eller någon annan grafisk redaktöröppna vårt skannade (fotograferade) alfabet.

  3. Starta den installerade Font Creator:


  • Klicka på fil (Arkiv) - ny (Ny) eller Ctrl + N



  • Vi ger vårt teckensnitt ett namn från handskrift ( mina-teckensnitt. ru ), markera Regelbunden och Inkludera inte konturer (för en tom kontur av silhuetter).


  • Ett fönster dyker upp med silhuetter av tecken, engelska bokstäver och något annat alfabet. Låt oss nu lägga till bokstäverna i det ryska alfabetet:


1. Klicka på Infoga i den översta raden och välj Tecken.


2. En tabell dyker upp framför dig med bokstäverna och symbolerna för ditt teckensnitt från din handstil, bläddra till botten av tabellen till bokstäverna i det ryska alfabetet.

3. Välj bokstaven "A" och klicka på Lägg till, välj sedan "I" och klicka även på Lägg till.



4. På samma sätt lägger du till bokstäverna "Ё", "е" och bokstäver från andra alfabet du behöver.

5. I fältet "Lägg till dessa tecken..." ändrar du kommatecken till bindestrecket mellan $0410-$044F.
6. Som ett resultat, i fältet Lägg till dessa tecken... bör det skrivas så här: $0410-$044F,$0401,$0451

7. Klicka på Ok.


Ryska symboler och alla bokstäver och tecken du lagt till visas i din mall.

Vi tar bort alla tecken vi inte behöver (förutom de fyra första, de är system ettor).

Låt oss nu lägga till vårt skannade (fotograferade) alfabet till Font Creator-programmet:
Om du inte har öppnat den än, då är det dags att göra det.
I den grafiska editorn, välj den första bokstaven och kopiera ( Ctrl +C) i Font Creator, välj den här bokstaven och klicka på infoga ( Ctrl + V)

Vi fortsätter att kopiera och klistra in alla bokstäver på plats. Som ett resultat har vi följande bild.

Nu måste du korrigera alla tecken, för att göra detta, dubbelklicka på rutan med din bokstav. Ett fönster öppnas med röda prickade linjer och den bokstav du valde

Låt oss ta reda på varför de behövs:
Den lägsta raden 1 (Win Descent) är maxgränsen för bokstäver med en svans (ts, y, shch, z, r, d) allt under denna linje kommer inte att skrivas ut.
Rad 2 (Baslinje) är stödraden för varje bokstav. Alla bokstäver måste finnas på denna rad.
Rad 3 (x-höjd) - maxhöjd på små bokstäver.
Linje 4 (CapHeight) - den maximala höjden för stora bokstäver, siffror, såväl som bokstäverna "c", "d", "b".
Linje 5 (WinAscent ) - den övre gränsen för tecken, allt ovanför denna rad kommer inte att skrivas ut.
De vänstra (6) och högra (7) vertikala linjerna bestämmer hur bokstäverna i ditt teckensnitt kommer att vidröra varandra. Om du vill att bokstäverna ska röra vid varandra som i manuskriptet, flytta bokstaven nära den vänstra (6), och flytta den högra (7) på bokstaven så att den slickar lite utanför linjen.

Vi anpassar alla bokstäver till linjerna, annars kommer teckensnitten att placeras slumpmässigt och följaktligen blir det inte vackert.Ett exempel på arrangemanget av olika bokstäver:


OK det är över nu. Installera ditt teckensnitt och starta textredigerare, hitta ditt typsnitt och njut av att använda det. Hur man installerar ett typsnitt.

Om du är för lat för att göra allt som beskrivs ovan och vill få ett professionellt gjort typsnitt från din handstil, väntar vi på dina beställningar på vår hemsida

Skapa ditt eget typsnitt

Tjena. Som utlovat berättar jag för dig hur du gör ditt eget typsnitt.
Jag ska genast säga att jag inte ger en länk för att ladda ner programmet här, men det kommer inte att vara svårt för dig att hitta det själv. Programmet heter High-Logic Font Creator, jag började med det, och det här det enklaste sättet förvandla bokstäverna du ritade till ett riktigt typsnitt. Om du upptäcker några fel, skriv gärna, för allt detta gjordes nästan intuitivt, och jag utger mig inte alls för att vara ett mästerligt utförande :) Och som vanligt öppnas större bilder om du klickar på det.
Vänner som arbetar med typsnitt professionellt, svär inte, det kommer praktiskt taget inga villkor eller regler här. Inlägget är avsett för dig som alltid velat skapa något sånt här, men inte vetat hur de ska ta sig an :)

Så det första vi behöver göra är att rita bokstäver, siffror, symboler, det vill säga allt du behöver. Jag ritade detta set för lager, idag ska jag göra om det till ett typsnitt. Det finns inga små gemener, så rita dem också för att göra teckensnittet fullt.

Jag ritar allt i Illustrator, men det är upp till dig. Många skriver helt enkelt på papper och skannar, det är också ett alternativ.
Därefter måste du spara varje bokstav separat. Det var allt, öppna nu programmet.
Vår första åtgärd är ganska uppenbar: Arkiv - Ny... Vi ser fönstret:

I fönstret, skriv in namnet på vårt teckensnitt i fältet Font family name, välj Unicode, Regular, Inkludera inte konturer. Det här är mina inställningar :)
Klicka på OK, vi ser att teckensnittsmallen har öppnats med alla möjliga bokstäver, siffror och andra symboler.

Jag kommer inte ihåg vad standardteckensnittet är, jag har Arial-fontmallen. För att ändra typsnittet, lägg till bokstäver, du måste gå till Infoga - Tecken, det här är in topppanel. Du kan också lägga till kyrilliska där, men vi kommer inte att göra det för tillfället.
Därefter är det viktigaste att lägga till våra bokstäver. Hitta den stora bokstaven A och dubbelklicka på den.
Vi ser ett fönster med ett gäng celler och ränder.

Vi får panik, minimerar programmet, tar ett djupt andetag och går tillbaka. Nu ska Dina förklara allt.
Varje remsa har sitt eget syfte, men först till kvarn. I det här fönstret högerklickar du var som helst och klickar på Importera bild.
Vi minns var vi sparade alla våra bokstäver, hitta vårt A, öppna det. Ett annat fönster:

Det är inget komplicerat här, flytta reglaget, klicka på allt du ser, förhandsgranskningen kommer att berätta vilka inställningar som är bäst att ställa in. Bilden visar min, du kan prova detsamma. Klicka på Generera. Här är vårt brev:

Så, vad vi ser: två vertikala ränder och fem horisontella.
Bokstaven ska placeras mellan två vertikala ränder, de anger avståndet före och efter bokstaven. Placera dem inte för nära eller direkt på brevet, annars blir det en enda röra.

Och nu om horisontella linjer. Jag kommer inte att belasta dig med termer, jag kommer att förklara det populärt:
1. Den översta stapeln är det maximala avståndet ovanför baslinjen (4).
2. Andra från toppen är höjden på versaler.
3. Den tredje är höjden på gemener.
4. Baslinjen längs vilken alla bokstäver är uppradade.
5. Maximalt avstånd under baslinjen (4).

För att ändra parametrarna för horisontella linjer måste du öppna Inställningar på fliken Format. Jag rekommenderar att googla parametrarna för några populära typsnitt och använda dem som exempel om du vill ändra något. Men jag har inte gjort något sånt :)

Som ni ser ökade jag bokstaven till rad 2, CapHeight, allt som återstår är att justera de vertikala ränderna. Jag vill att det ska vara ett bra avstånd före och efter bokstaven, så jag flyttar själva bokstaven bort från den vänstra linjen, och tar den högra vid den svarta triangeln ovanpå och flyttar den närmare bokstaven. Så här:

Det är precis vad jag kommer att göra med alla mina versaler. Om du lägger till gemener, gör dem i höjden upp till rad nummer 3.
När vi har placerat bokstaven stänger vi helt enkelt detta fönster. Alla bokstäver kommer att falla på plats, och detta märks:

Jag har en bokstav Q med en svans, jag vill inte att den ska sticka ut från den allmänna raden av bokstäver, så jag placerar den på baslinjen och lämnar svansen nedanför.
Gör samma sak med alla små bokstäver (p, q, y, g, j), och vissa, tvärtom, kan vara något högre än den stora bokstaven (d, b, k, f).

Jag behöver inga siffror än, så min bild ser ut så här:

Om du inte kan vänta med att prova bokstäverna i aktion, gå sedan till Arkiv - Spara som, spara teckensnittet i .ttf-formatet som föreslagits av programmet.
Vi installerar typsnittet, går till textredigeraren, hittar vårt typsnitt, kontrollerar det. Arbetar!

Nåväl, nu kan du unna dig. Vi tar det värsta fotot av fyrverkerierna den 9 maj, gör lite magi i Photoshop, skriver in texten och voila! :)

Inte så svårt, eller hur? Se till att prova det och visa oss resultatet :)

För att skapa typsnitt rekommenderar jag att du använder en editor FontCreator från High-Logic. Jag ska genast säga att programmet är betalt, men det här är det bästa alternativet som fångade mitt öga. Om du behöver gratis redaktör teckensnitt, var uppmärksam på programmet Typ ljus från cr8software och onlinetjänst Glyfhr Studio. Jag håller mig till FontCreator (om jag inte har fel så var det version 6.0).

Steg 1: och så starta editorn och använd kommandot: Arkiv > Ny(Arkiv > Ny) - skapa ett nytt typsnitt. I fönstret som öppnas Nytt teckensnitt (från engelska) Nytt teckensnitt ) måste du ange ett antal parametrar:

  • Teckensnittets efternamn- namn på teckensnittsfamiljen, dvs. bara namnet på typsnittet, något sådant Times New Roman, pekade jag Mitt teckensnitt.
  • Karaktärsuppsättning- en uppsättning tecken som ingår i teckensnittet, jag rekommenderar att du väljer Unicode (tecken).
  • Typsnitt- teckensnittsstil, för varje stil måste du skapa en separat fil. För vanlig (standard) teckensnittsstil, välj alternativet Regelbunden.
  • Fördefinierade konturer- inbyggda kretsar. Jag rekommenderar att du väljer alternativet Inkludera inte konturer, vilket gör att du kan skapa en ren kontur av silhuetter.

Steg 2: ett fönster kommer att dyka upp framför dig med en form av silhuetter av några symboler, siffror och latinska bokstäver. För lägga till kyrilliska alfabetet till typsnittet måste du göra följande:

2.1. Använda kommandot: Infoga > Tecken... (Infoga > Symboler...)- Öppna fönstret Infoga tecken(från engelska) infoga tecken).

I det här fallet kan du få följande meddelande:

Denna operation kan inte ångras. Vill du fortsätta?

Den informerar dig om att operationen är oåterkallelig och för att slutföra den måste du bekräfta din åtgärd, tryck på knappen " Ja».

2.2. Därefter kommer en tabell med symboler att dyka upp framför dig. För enkelhetens skull, i listan Teckensnitt välj typsnitt Arial. På listan Gå till Unicode Block Välj Kyrillisk. Använda fältet Vald karaktär, tittar på koden för bokstäverna "A" ($0410) och "I" ($044F). I fält Lägg till dessa tecken och/eller teckenintervall... vi lägger till de nödvändiga tecken och/eller teckenintervall, i vårt fall är det: $0410-$044F . Klicka på knappen " OK».

2.3. Symboler med kyrilliska bokstäver kommer att läggas till i ditt teckensnitt. På samma sätt, men separat, kan du lägga till bokstäverna "е" ($0451) och "Ё" ($0401), som inte ingick i det teckenintervall som specificerades i föregående steg.

Steg 3: Nu kan du börja skapa symboler. Här, förutom vektorredigering, med hjälp av lämpliga verktyg, låter FontCreator dig skapa karaktärer från bilder genom att konvertera dem till en vektorbild. Självklart måste du rita en separat bild för varje symbol.

3.1. Som exempel ritar jag en stor bokstav "A".

3.2. I princip, efter skanning, kan denna bildfil användas för import. För att göra detta, välj en bild i formuläret önskad symbol. Använd sedan kommandot: Verktyg > Importera bild... (Verktyg > Bildimport)- Öppna fönstret Importera rasterbild (från engelska) importera bitmapp) .


3.3. Klicka på knappen i fönstret som öppnas Ladda…» (från engelska) ladda ner) och välj den bildfil du behöver.

3.4. Flytta reglaget Tröskel (från engelska) tröskel) Ställ in bildens mörkare nivå för att skapa en tydligare kontur. Du kan också använda filter:

  • Smidigt filter- utjämningsfilter.
  • Erodera- oskärpa, gör symbolen djärvare.
  • Utvidga- stretching gör typsnittet tunnare.

Importläge (från engelska) importläge) bättre lämna det Spår, för att konvertera till kurvor. MED Negativ (från engelska) negativ) , jag tror att allt är klart. Så klicka på knappen Generera».

Steg 4: Genom att byta till redigeringsläge, dubbelklicka på symbolen i formuläret är det bara att rätta till ojämnheterna, justera storleken och ställa in indragslinjen. Du måste göra samma sak för andra symboler.

I allmänhet kan processen att skapa ett teckensnitt inte kallas särskilt svårt. Detta kräver tålamod och mycket tid. Med FontCreator teckensnittsredigerare kan denna tid sparas på många sätt genom att importera och konvertera en teckenbild till en vektor. Men även detta alternativ är mycket arbete. Det är allt jag har. Tack för din uppmärksamhet. Lycka till!

Det verkar för mig att många av dem som brinner för att rita bokstäver och skapa bokstäver någon gång har tanken: borde vi inte förvandla all denna skönhet till ett typsnitt? Så att du inte bara kan beundra en specifik komposition, utan även skriva ut dessa vackra bokstäver på ett riktigt tangentbord och skapa ännu mer skönhet... Nåväl, så var det i alla fall för mig :) När jag insåg att man kan skapa ett typsnitt själv, det hände mig bokstavligen en revolution av medvetande (förmodligen är det precis vad som kallas ett "aha-moment" på engelska).

Och jag började försöka komma på hur jag skulle göra det här. Det fanns lite information, och det som fanns var obegripligt och komplext. Jag gick vilse i denna täta skog av termer och övergav nästan tanken på att lära mig hur man skapar typsnitt. Men genom något mirakel gav jag inte upp, jag fortsatte att försöka och gjorde mitt första typsnitt Bronks - långt ifrån idealiskt, men mycket värdefullt i form av erfarenhet. Förresten har jag redan skrivit om hur Bronx skapades. Och idag vill jag berätta mer detaljerat om processen att skapa ett typsnitt som helhet, så att det skulle vara lättare för dig att förstå om detta är "din" aktivitet och om du skulle vara intresserad av att prova det.

FONT BÖRJAR MED KORT

ATT RITA GLYFER ÄR DAGENS ARBETE :)

Efter att ha samlat på mig mod, det vill säga inspiration, brukar jag vänta tills jag har minst en halv dag ledig (helst hela dagen) och sätta mig ner för att rita glyfer. Tecken är tecknen i ett teckensnitt, både bokstäver och siffror, och alla dessa symboler som plus, komma, frågetecken och så vidare.

Hur brett jag ritar ett typsnitt – det vill säga hur många glyfer jag skapar – beror direkt på målgruppen. Det är klart att ju fler glyfer, desto mer värdefulla är typsnittet, men samtidigt finns det glyfer som är värda att lägga tid på, och det finns de som inte är så mycket (om du till exempel skapar ett standard handdrone-font för små företag kommer ett brett språkstöd att vara mycket mer relevant än alla, alla, alla matematiska tecken, av vilka många, om jag ska vara ärlig, såg för första gången i Glyphs-programmet :)). Jag kommer att prata i detalj om vilka glyfer som nödvändigtvis ska ritas, och vilka ytterligare och i vilka mängder, i workshopen om att skapa ett typsnitt som jag jobbar hårt med (om det i slutet av anteckningen :)).

Jag kan kort säga att jag skulle råda dig att göra det första teckensnittet enkelt och koncist, annars, om du omedelbart försöker göra både den initiala och slutliga versionen av bokstäverna och lägger till det kyrilliska alfabetet till det latinska alfabetet, kommer du helt enkelt inte att slutföra typsnittet (och om du slutför det är det osannolikt att det kommer att löna sig, eftersom du inte klarar dig utan misstag när du gör typsnitt, förmågan att se små fläckar och detaljer som påverkar typsnittets kvalitet visas bara med övning). Därför är det till en början bäst att klara sig med standarden ställ A-Z, a-z, 0-9, grundläggande skiljetecken.

Varför ägnar jag en halv dag åt att rita ett typsnitt? För när du "fångar vågen", det vill säga du känner för en viss stil, typsnittets atmosfär, är det bättre att rita allt på en gång, medan handen utvecklas. Detta gäller förmodligen mer för handskrivna typsnitt (jag har inte provat andra än). Om du lägger den åt sidan och försöker rita resten av bokstäverna senare kommer de garanterat att vara annorlunda, och det kommer att ta tid att "stämma din hand" igen och börja falla in i den allmänna stilen.

Att rita ett teckensnitt är den mest kreativa processen av alla. Om du naivt tror att att skapa typsnitt handlar om kreativitet och en hyllning till inspiration, skyndar jag mig att göra dig besviken: kreativitet och att rita bokstäver tar upp högst 20 % (vanligtvis mindre) av tiden det tar att skapa ett typsnitt. Resten är teknik: skanning, bearbetning, alfabetsjustering, inställning, export till ett program, mellanrum och kerning, kodinställningar, testning och allt det där. Därför, om du bara vill rita bokstäver och det är tråkigt för dig att ens tänka på den tekniska delen, är det bättre att skapa bokstäver.

DIGITAL DEL AV PROCESSEN

När typsnittet är ritat är det dags att digitalisera det. Min bearbetningskedja ser ut så här: skanner - photoshop - illustratör. I skannern ställer jag in de maximala inställningarna, i Photoshop ökar jag kontrasten och rengör konturerna lite, i Illustrator gör jag ett spår, hittar alfabetet (det vill säga jag ordnar bokstäverna i följd, försöker "sätta ihop" en några ord för att kolla hur allt ser ut) och ren-ren- jag städar bokstäverna.

Om rengöringsstadiet - jag brukade tänka att "varför rengöra det, det är ett handskrivet teckensnitt." Men senare avslöjades denna detalj: ju fler punkter i vektorn, desto större är sannolikheten att typsnittet kommer att vara buggigt på alla möjliga sätt - från vägran från Glyphs (eller ett annat program där typsnittet kommer att monteras i) att exportera filen , till slutanvändarnas oförmåga att använda den utan fel. Därför är ett minimum av prickar nyckeln till komfort, och ja, du behöver fortfarande rengöra dem, även typsnitt med textur.

Jag rengör bokstäver i Illustrator på flera sätt: för det första med ett magiskt suddgummi från Astute Graphics (del betald plugin, som jag pratar om), tyvärr gratis alternativ Jag vet inte ens ungefärlig kvalitet, för det andra med en vanlig illustratörs penna - jag markerar konturen och gör den mer exakt.

Efter det förbereder jag typsnittet för export - det här är en separat stor historia, som det med största sannolikhet kommer att finnas flera videor om - och överför bokstäverna till Glyphs.

ETT BRA FONTSPROGRAM ÄR VIKTIGT

Att sätta ihop ett typsnitt, det vill säga att omvandla vektorbokstäver till fungerande sådana, den typ som kan skrivas på ett tangentbord, kan i teorin göras i olika program. Om du Googlar hittar du imponerande listor med alternativ för varje smak och budget. Jag listar inte namn här eftersom jag inte är redo att rekommendera något jag inte vet/aldrig har provat. Jag jobbar i Glyphs-programmet och vet bara att alla seriösa typdesigners (de som säljer typsnitt) gör dem antingen i Glyphs eller i Fontlab. Detta beror med största sannolikhet på att billigare/gratis program inte ger alla alternativ du behöver för att skapa intressanta typsnittshistorier.

En gång i tiden valde jag Glyphs för att jag ville, å ena sidan, omedelbart vänja mig vid det "rätta" teckensnittsprogrammet (det vill säga ett som kan användas för att skapa riktigt genomtänkta, komplexa, elementrika typsnitt och inte fastna runt en månad i någon gratis) bara för att senare få reda på att du inte kan skapa villkorliga ligaturer där), å andra sidan var jag inte redo att betala flera gånger mer för Fontlab. Tydligen var valet det rätta - jag känner folk som bytte från Fontlab till Glyphs och säger att det senare har ett tydligare gränssnitt :)

Ett bra typsnittsprogram är viktigt eftersom det är här den magiska förvandlingen av bara bokstäver till ett fungerande typsnitt sker. Om programmet inte tillåter dig att skapa språkstöd kommer du inte att kunna skapa det. Om du inte kan lägga till en alternativ uppsättning versaler, kommer du inte att kunna lägga till dem, även om du redan har ritat dem.

Efter att ha exporterat till Glyphs satte jag upp en massa olika saker: bokstavsgrupper, mellanrum (negativt mellanslag till vänster och höger om bokstäver, grovt sett), kerning (avstånd mellan specifika bokstäverpar), lägga till språkstöd, ligaturer (speciellt varianter av bokstavskombinationer), initiala och sista alternativ (med långa hästsvansar, swashes, blommor och allt det där) och alternativa uppsättningar, om de föreslås. Längs vägen är koden konfigurerad så att allt fungerar för slutanvändaren som jag tänkt, och utan problem. Det här stadiet, som jag beskrev i ett par meningar, är faktiskt det som tar ungefär 70% av tiden när man skapar ett typsnitt :) Och jag beskriver det kortfattat, inte för att jag är girig, utan för att man bara kan skriva om kerning en lapp på tre gånger längre än så här, och det räcker ändå inte. I kursen om typsnitt kommer jag att uppehålla mig vid alla dessa punkter i detalj (just nu försöker jag hitta gränsen mellan "inte tillräckligt detaljerad" och "för mycket information att smälta").

I den här artikelhandledningen kommer jag att berätta för dig hur du skapar ditt eget typsnitt för en webbplats med hjälp av ikoner som du själv skapat. Allt vi behöver för detta är ett program för att skapa vektorgrafik (Adobe Illustrator eller Inkspcape) och tillgång till Internet!Så, låt oss komma igång! Du kan ladda ner alla bilder, ikoner och css-teckensnitt som används för detta i slutet av artikeln.

För den här handledningen kommer vi att göra något enkelt. För den första ikonen kommer vi att rita en vanlig stjärna. För den andra ikonen - en örn med bokstaven W inuti. Det är ganska lätt att rita och du kan skapa alla former och kombinationer. Jag använde illustrator för dessa ändamål.

När du har slutfört den kreativa delen måste din skapelse sparas i SVG-format. Klicka på "Spara som" och välj filtypen som SVG. Nu kan du fortsätta direkt till att skapa teckensnittet.

För dessa ändamål använder vi den populära och gratis tjänst IcoMoon.

Det första du ska göra är att skapa nytt projekt, så klicka på menyn i det övre vänstra hörnet och klicka på "Nytt projekt". Därefter laddar vi våra färdiga svg filer efter att ha klickat på knappen "Importera ikoner". När du har slutfört dessa steg bör du se en bild som denna på din bildskärm:

Nu har vi möjlighet att ändra koden för varje ikon (i vårt fall kommer det att vara e600 och e601), namnet på vårt teckensnitt, CSS-prefixet och så vidare. Allt detta görs i "Inställningar". Vi kan också se teckensnittet i aktion genom att klicka på länken "Aktivera snabbanvändning" - vilket gör att vi kan få en tillfällig länk till vårt teckensnitt, samt möjligheten att se koden i CodePen.

När du har konfigurerat allt, klicka på knappen "Ladda ner" längst ner på sidan och ladda ner arkivet. I detta arkiv hittar du ditt typsnitt i formaten ttf, eot, svg och woff + en demosida med typsnittet.

Använda ikoner på webbplatsen

Nu behöver vi bara inkludera CSS-teckensnittet med @font-face och ange andra parametrar (de är alla skrivna i css-filen i arkivet som du laddade ner.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; tala: ingen; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Bättre teckensnittsrendering ===========* -webkit-font-smoothing: kantutjämnad; -moz-osx-font-smoothing: gråskala; ) .wdm-star:before ( innehåll: "\e600"; ) .wdm-eagle:before ( innehåll: "\e601"; )

Nu kan vi använda vårt typsnitt i HTML-kod så här:

Ange klassnamnet för taggen vi får vår ikon.




Topp