Kuinka luoda oma fontti Windowsille. Kuinka luoda oma käsinkirjoitettu fontti. FontCreator venäjäksi - kirjasimien luominen
Hei kaikki.
Ei kauan sitten, päästäksemme kokeisiin, kohtasimme ongelman - jokaisen tunnilta poissa olleiden oli lähetettävä käsin kirjoitettuja esseitä. 1-2 lävitse 1 essee, 2-5 läpäisyä 2 esseetä ja niin edelleen. Jokainen abstrakti on vähintään 10 arkkia. Aiheen abstraktin löytäminen Internetistä ei ole vaikeaa, mutta kuinka voit siirtää koko asian paperille vähimmällä vaivalla?Internetistä löytyi monia venäläisiä käsinkirjoitettuja fontteja (linkki). Mutta kun olet ladannut useita kopioita näistä kirjasimista, kävi selväksi, että kukaan ei uskoisi kirjoitetun aitouteen, etkä voinut läpäistä yksinkertaista koetta opettajalta, kun hän pyysi sinua kirjoittamaan jotain samalla käsialalla.Siksi päätettiin tee oma käsinkirjoitettu fontti. Mutta kuinka tehdä fontti käsialastasi jotta kukaan ei voisi erottaa häntä ja voisit rauhallisesti osoittaa, että se olit sinä, joka kirjoitti?
Ratkaisu on löydetty - upea ohjelma High-Logic FontCreator Professional 9
Käsinkirjoitus fontti
Asennamme Font Creatorin, mielestäni tässä ei pitäisi olla ongelmia.
- Puhtaalle valkoiselle paperiarkille kirjoitamme kaikki numerot, venäjän ja englannin aakkosten kirjaimet sekä erityiset. symboleja.
- Skannaamme (mieluiten) tai valokuvaamme tuloksena olevat aakkoset.
- Paintissa, Photoshopissa tai mikä tahansa muu graafinen editori, avaa skannatut (valokuvatut) aakkosemme.
- Käynnistä asennettu Font Creator:
- Napsauta tiedostoa (Tiedosto) - uusi (Uusi) tai Ctrl + N
- Annamme fontillemme nimen käsinkirjoituksesta ( minun-fontit. ru ), valitse Tavallinen ja Älä sisällytä ääriviivoja (jos haluat siluettien ääriviivat tyhjäksi).
- Näkyviin tulee ikkuna, jossa on siluetteja merkkejä, englanninkielisiä kirjaimia ja muita aakkosia. Lisätään nyt venäjän aakkosten kirjaimet:
1. Napsauta ylärivillä Lisää ja valitse Merkit.
2. Edessäsi tulee taulukko, jossa on käsinkirjoituksesi kirjaimet ja symbolit; vieritä taulukon alareunaan venäjän aakkosten kirjaimiin.
3. Valitse kirjain "A" ja napsauta Lisää, valitse sitten "I" ja napsauta myös Lisää.
4. Lisää samalla tavalla kirjaimet “Ё”, “е” ja muiden tarvitsemiesi aakkosten kirjaimet.
5. Muuta "Lisää nämä merkit…" -kentässä pilkku väliviivaksi välillä $0410-$044F.6. Tämän seurauksena Lisää nämä merkit... -kenttään se tulisi kirjoittaa seuraavasti: $0410-$044F,$0401,$0451
7. Napsauta OK.
Venäläiset symbolit ja kaikki lisäämäsi kirjaimet ja merkit näkyvät mallissasi.
Poistamme kaikki tarpeettomat merkit (lukuun ottamatta neljää ensimmäistä, ne ovat järjestelmämerkkejä).
Jos et ole vielä avannut sitä, on aika tehdä se.
Valitse graafisessa editorissa ensimmäinen kirjain ja kopioi ( Ctrl +C) valitse tämä kirjain Font Creatorissa ja napsauta Lisää ( Ctrl + V)
Alin rivi 1 (Win Descent) on enimmäisraja kirjaimille, joissa on häntä (ts, y, shch, z, r, d), kaikkea tämän rivin alapuolella olevaa ei tulosteta.
Rivi 2 (perusviiva) on jokaisen kirjaimen tukiviiva. Kaikkien kirjainten on sijaittava tällä rivillä.
Rivi 3 (x-korkeus) - pienten kirjainten enimmäiskorkeus.
Rivi 4 (CapHeight) - suurten kirjainten, numeroiden sekä kirjainten "c", "d", "b" enimmäiskorkeus.
Rivi 5 (WinAscent ) - merkkien yläraja, kaikkea tämän rivin yläpuolella ei tulosteta.
Vasen (6) ja oikea (7) pystyviivat määrittävät, kuinka fontin kirjaimet koskettavat toisiaan. Jos haluat kirjainten koskettavan toisiaan kuten käsikirjoituksessa, siirrä kirjain lähelle vasenta (6) ja siirrä oikea (7) kirjeen päälle niin, että se nuolee hieman viivan yli.
Säädämme kaikki kirjaimet riveihin, muuten kirjasinmerkit sijoitetaan sattumanvaraisesti ja vastaavasti se ei ole kaunis.Esimerkki eri kirjainten järjestelystä:
OK, nyt kaikki on ohi. Asenna kirjasin, käynnistä tekstieditori, etsi kirjasin ja nauti sen käytöstä. Kuinka asentaa fontti.
Jos olet liian laiska tekemään kaikkea yllä kuvattua ja haluat saada ammattimaisesti tehdyn fontin käsialastasi, odotamme tilauksiasi verkkosivuillamme
Luo oma fontti
Hei kaverit. Kuten lupasin, kerron sinulle, kuinka voit tehdä oman fontin.
Sanon heti, että en anna linkkiä ohjelman lataamiseen täältä, mutta sinun ei tule olemaan vaikeaa löytää se itse. Ohjelman nimi on High-Logic Font Creator, aloitin sillä, ja se on yksinkertaisin tapa muuttaa piirtämäsi kirjaimet oikeaksi kirjasimeksi. Jos huomaat virheitä, kirjoita, koska tämä kaikki tehtiin lähes intuitiivisesti, enkä ole ollenkaan mestarillinen toteutus :) Ja kuten tavallista, isommat kuvat aukeavat klikkaamalla.
Ystävät, jotka käsittelevät fontteja ammattimaisesti, älkää vannoko, täällä ei käytännössä ole ehtoja tai sääntöjä. Postaus on tarkoitettu niille, jotka ovat aina halunneet luoda jotain tällaista, mutta eivät tienneet miten lähestyä :)
Joten ensimmäinen asia, joka meidän on tehtävä, on piirtää kirjaimia, numeroita, symboleja, eli kaikki mitä tarvitset. Piirsin tämän setin varastoon, tänään muutan sen fontiksi. Pieniä pieniä kirjaimia ei ole, joten piirrä myös ne, jotta fontti tulee täyteen. 
Piirrän kaiken Illustratorissa, mutta se on sinun. Monet ihmiset vain kirjoittavat paperille ja skannaavat, sekin on vaihtoehto.
Seuraavaksi sinun on tallennettava jokainen kirjain erikseen. Siinä kaikki, nyt avaa ohjelma.
Ensimmäinen toimintamme on melko ilmeinen: Tiedosto - Uusi... Näemme ikkunan:
Syötä ikkunassa Fonttisukunimi-kenttään fontimme nimi, valitse Unicode, Normaali, Älä sisällytä ääriviivoja. Nämä ovat minun asetukset :)
Napsauta OK, näemme, että fonttimalli on avattu kaikilla mahdollisilla kirjaimilla, numeroilla ja muilla symboleilla.
En muista, mikä oletusfontti on, minulla on Arial-fonttimalli asetettu. Jos haluat muuttaa fonttia, lisätä kirjaimia, sinun on siirryttävä kohtaan Lisää - Merkit, se on yläpaneelissa. Voit lisätä sinne myös kyrillisen kirjaimen, mutta emme tee sitä toistaiseksi.
Seuraavaksi tärkeintä on lisätä kirjaimet. Etsi iso kirjain A ja kaksoisnapsauta sitä.
Näemme ikkunan, jossa on joukko soluja ja raitoja.
Panikoimme, minimoimme ohjelman, hengitämme syvään ja palaamme takaisin. Nyt Dina selittää kaiken.
Jokaisella nauhalla on oma tarkoituksensa, mutta ensin asiat ensin. Napsauta tässä ikkunassa hiiren kakkospainikkeella mitä tahansa ja napsauta Tuo kuva.
Muistamme mihin tallensimme kaikki kirjaimemme, löydämme A:n, avaamme sen. Toinen ikkuna:
Tässä ei ole mitään monimutkaista, siirrä liukusäädintä, napsauta kaikkea mitä näet, esikatselu kertoo, mitkä asetukset on parasta asettaa. Kuvassa omani, voit kokeilla samaa. Napsauta Luo. Tässä on kirjeemme:
Joten mitä näemme: kaksi pystysuoraa raitaa ja viisi vaakasuoraa.
Kirjeen tulee sijaita kahden pystysuoran raidan välissä, ne osoittavat etäisyyden ennen ja jälkeen kirjaimen. Älä aseta niitä liian lähelle tai suoraan kirjeen päälle, muuten siitä tulee sotkua.
Ja nyt vaakasuuntaisista viivoista. En rasita teitä termeillä, selitän sen kansanomaisesti:
1. Ylin palkki on suurin etäisyys perusviivan yläpuolella (4).
2. Toiseksi ylhäältä on isojen kirjainten korkeus.
3. Kolmas on pienten kirjainten korkeus.
4. Perusviiva, jota pitkin kaikki kirjaimet ovat rivissä.
5. Suurin etäisyys perusviivan alapuolella (4).
Vaakaviivojen parametrien muuttamiseksi sinun on avattava Muoto-välilehden Asetukset. Suosittelen googlaamaan joidenkin suosittujen fonttien parametreja ja käyttämään niitä esimerkkinä, jos haluat muuttaa jotain. Mutta en tehnyt mitään tuollaista :)
Kuten näette, lisäsin kirjaimen riville 2, CapHeight, jäljellä on vain säätää pystyraitoja. Haluan, että ennen ja jälkeen kirjaimen on kunnollinen etäisyys, joten siirrän itse kirjaimen pois vasemmasta rivistä, ja otan oikean yläreunan mustasta kolmiosta ja siirrän sen lähemmäksi kirjainta. Kuten tämä:
Juuri näin teen isoilla kirjaimillani. Jos lisäät pieniä kirjaimia, aseta ne riville 3 asti.
Kun olemme sijoittaneet kirjeen, suljemme tämän ikkunan. Kaikki kirjaimet loksahtavat paikoilleen, ja tämä on havaittavissa:
Minulla on Q-kirjain, jossa on häntä, en halua sen erottuvan yleisestä kirjainrivistä, joten asetan sen perusviivalle ja jätän hännän alle.
Tee sama kaikille pienille kirjaimille (p, q, y, g, j), ja jotkut päinvastoin voivat olla hieman isoja kirjaimia korkeampia (d, b, k, f).
En vielä tarvitse numeroita, joten kuvani näyttää tältä:
Jos et malta odottaa, että pääset kokeilemaan kirjaimia toiminnassa, siirry kohtaan Tiedosto - Tallenna nimellä, tallenna fontti ohjelman ehdottamassa .ttf-muodossa.
Asennamme fontin, siirrymme tekstieditoriin, löydämme kirjasimen, tarkistamme sen. Toimii!
No, nyt voit hemmotella itseäsi. Otamme pahimman kuvan 9. toukokuuta ilotulituksesta, teemme taikuutta Photoshopissa, kirjoitamme tekstin ja voila! :)
Ei niin vaikeaa, eihän? Muista kokeilla ja näytä meille tulokset :)
Suosittelen fonttien luomiseen editorin käyttöä FontCreator High-Logicilta. Sanon heti, että ohjelma on maksettu, mutta tämä on paras vaihtoehto, joka pisti silmään. Jos tarvitset ilmaisen fonttieditorin, kiinnitä huomiota ohjelmaan Tyyppi valo cr8-ohjelmistosta ja verkkopalvelusta Glyphr Studio. Pysyn FontCreatorissa (jos en ole väärässä, se oli versio 6.0).
Vaihe 1: ja niin, käynnistä editori ja käytä komentoa: Tiedosto > Uusi(Tiedosto > Uusi) - luo uusi fontti. Avautuvassa ikkunassa Uusi fontti (englannista) Uusi fontti) , sinun on määritettävä useita parametreja:
- Fontin sukunimi- kirjasinperheen nimi, ts. vain fontin nimi, jotain sellaista Times New Roman, osoitin Oma kirjasin.
- Merkistö- fontti sisältää merkkejä, suosittelen valitsemaan Unicode (merkkiä).
- Fonttityyli- kirjasintyyli, jokaiselle tyylille on luotava erillinen tiedosto. Jos haluat käyttää tavallista (oletus) fonttityyliä, valitse vaihtoehto Säännöllinen.
- Ennalta määritetyt ääriviivat- sisäänrakennetut piirit. Suosittelen, että valitset Älä sisällytä ääriviivoja -vaihtoehdon, jonka avulla voit luoda selkeät ääriviivat siluetteista.
Vaihe 2: Edessäsi avautuu ikkuna, jossa on siluetteja joistakin symboleista, numeroista ja latinalaisista kirjaimista. varten lisäämällä kyrilliset aakkoset fonttia varten sinun on tehtävä seuraava:
2.1. Käyttämällä komentoa: Lisää > Merkit… (Lisää > Symbolit...)- Avaa ikkuna Lisää merkit(englannista) merkkien lisääminen).
Tässä tapauksessa saatat saada seuraavan viestin:
Tätä toimintoa ei voi peruuttaa. Haluatko jatkaa?
Se ilmoittaa, että toimenpide on peruuttamaton ja sen suorittamiseksi sinun on vahvistettava toimintosi painamalla painiketta " Joo».
2.2. Seuraavaksi edessäsi tulee symbolitaulukko. Mukavuuden vuoksi luettelossa Fontit valitse fontti Arial. Listalla Siirry Unicode Blockiin valitse Kyrillinen. Kentän käyttäminen Valittu hahmo, tarkastelee koodia kirjaimille "A" ($0410) ja "I" ($044F). Kentällä Lisää nämä merkit ja/tai merkkialueet… lisäämme tarvittavat merkit ja/tai merkkialueen, meidän tapauksessamme se on: $0410-$044F . Napsauta painiketta " OK».
2.3. Kyrillisten kirjainten symbolit lisätään fonttilomakkeeseen. Samalla tavalla, mutta erikseen, voit lisätä kirjaimet "е" ($0451) ja "Ё" ($0401), jotka eivät sisältyneet edellisessä vaiheessa määritettyyn merkkialueeseen.
Vaihe 3: Nyt voit aloittaa symbolien luomisen. Tässä vektorimuokkauksen lisäksi, käyttämällä sopivia työkaluja, FontCreator antaa sinun luoda kuvista merkkejä muuntamalla ne vektorikuvaksi. On selvää, että jokaiselle symbolille on piirrettävä erillinen kuva.
3.1. Esimerkkinä piirrän ison kirjaimen "A".
3.2. Periaatteessa tätä kuvatiedostoa voidaan käyttää skannauksen jälkeen tuontiin. Voit tehdä tämän valitsemalla lomakkeesta haluamasi symbolin kuvan. Käytä sitten komentoa: Työkalut > Tuo kuva… (Työkalut > Kuvien tuonti)- Avaa ikkuna Tuo rasterikuva (englannista) tuoda bittikartta) .
3.3. Napsauta avautuvassa ikkunassa -painiketta Ladata…» (englannista) ladata) ja valitse tarvitsemasi kuvatiedosto.
3.4. Liukusäätimen siirtäminen Kynnys (englannista) kynnys) Luo selkeämpi ääriviiva määrittämällä kuvan tummumistaso. Voit myös käyttää suodattimia:
- Tasainen suodatin- tasoitussuodatin.
- Erode- hämärtää, tekee symbolista rohkeamman.
- Laajentaa- venytys ohenee fonttia.
Tuontitila (englannista) tuontitila) parempi jättää Jäljittää, muuntaa käyriksi. KANSSA Negatiivinen (englannista) negatiivinen) , mielestäni kaikki on selvää. Napsauta siis painiketta Tuottaa».
Vaihe 4: Vaihtamalla muokkaustilaan, kaksoisnapsauttamalla lomakkeessa olevaa symbolia, sinun tarvitsee vain korjata epäsäännöllisyydet, säätää kokoa ja asettaa sisennysviiva. Sinun on tehtävä sama muille symboleille.
Yleensä fontin luomisprosessia ei voida kutsua erityisen vaikeaksi. Tämä vaatii kärsivällisyyttä ja paljon aikaa. FontCreator-fonttieditoria käyttämällä tätä aikaa voidaan säästää monin tavoin tuomalla ja muuntamalla merkkikuva vektoriksi. Tämäkin vaihtoehto on kuitenkin paljon työtä. Se on kaikki mitä minulla on. Kiitos huomiostasi. Onnea!
Minusta tuntuu, että monet niistä, jotka ovat intohimoisia kirjaimien piirtämiseen ja kirjainten luomiseen, ovat jossain vaiheessa miettineet: eikö meidän pitäisi muuttaa kaikkea tätä kauneutta fontiksi? Että ei voi vain ihailla tiettyä sommitelmaa, vaan myös tulostaa näitä kauniita kirjaimia oikealle näppäimistölle ja luoda vielä enemmän kauneutta... No niin, ainakin minulle kävi :) Kun tajusin, että voit luoda fontin itsellesi, minulle tapahtui kirjaimellisesti tietoisuuden vallankumous (luultavasti juuri tätä kutsutaan englanniksi "aha-momentiksi").
Ja aloin yrittää selvittää, miten tämä tehdään. Tietoa oli vähän, ja se mitä oli, oli käsittämätöntä ja monimutkaista. Eksyin tähän tiheään termien metsään ja melkein hylkäsin ajatuksen opetella luomaan kirjasimia. Mutta ihmeen kaupalla en luovuttanut, vaan jatkoin yrittämistä ja tein ensimmäisen fontini Bronksin - kaukana ihanteellisesta, mutta kokemuksella erittäin arvokasta. Muuten, kirjoitin jo siitä, kuinka Bronx luotiin. Ja tänään haluan kertoa sinulle yksityiskohtaisemmin koko fontin luomisprosessista, jotta sinun olisi helpompi ymmärtää, onko tämä "sinun" toimintaasi ja olisitko kiinnostunut kokeilemaan sitä.
FONTTI ALKAA LYHYESTÄ
GLYFIEN PIIRTÄMINEN ON PÄIVÄN TEKO :)
Kerättyäni rohkeuteni eli inspiraation odotan yleensä, kunnes minulla on vähintään puoli päivää vapaata (mieluiten koko päivä) ja istun piirtämään kuvioita. Glyfit ovat fontin merkkejä, sekä kirjaimia että numeroita, ja kaikkia niitä symboleja, kuten plus, pilkku, kysymysmerkki ja niin edelleen.
Se, kuinka leveästi piirrän fontin – eli kuinka monta kuviota luon – riippuu suoraan kohdeyleisöstä. On selvää, että mitä enemmän kuvioita, sitä arvokkaampi fontti, mutta samalla on kuvioita, joihin kannattaa käyttää aikaa, ja on sellaisia, joihin ei niin paljon (esimerkiksi jos luot tavallisen handdrone-fontin pienille yrityksille laaja kielen tuki on paljon tärkeämpää kuin kaikki, kaikki, kaikki matemaattiset merkit, joista monet, rehellisesti sanottuna, näin ensimmäistä kertaa Glyfit-ohjelmassa :)). Puhun yksityiskohtaisesti siitä, mitkä glyfit tulisi piirtää välttämättä, ja mitkä lisäksi ja missä määrin, työpajassa fontin luomisesta, jonka parissa työskentelen kovasti (sitä muistiinpanon lopussa :)).
Voin lyhyesti sanoa, että suosittelen tekemään ensimmäisen kirjasimen yksinkertaiseksi ja ytimekkääksi, muuten, jos yrität heti tehdä sekä kirjainten alkuperäisen että lopullisen version ja lisäät kyrilliset aakkoset latinalaisiin aakkosiin, et yksinkertaisesti suorita loppuun fontti (ja jos täytät sen, se tuskin kannattaa, koska kirjoitusten tekemisessä ei pärjää ilman virheitä, kyky nähdä pieniä täpliä ja fontin laatuun vaikuttavia yksityiskohtia ilmenee vasta harjoittelussa). Siksi aluksi on parasta tulla toimeen tavallisella joukolla A-Z, a-z, 0-9, perusvälimerkkejä.
Miksi omistan puoli päivää fontin piirtämiseen? Koska kun "saappaat aallon", eli tunnet tietyn tyylin, fontin tunnelman, on parempi piirtää kaikki yhdellä kertaa, samalla kun kättä kehitetään. Tämä koskee luultavasti enemmän käsinkirjoitettuja fontteja (en ole vielä kokeillut muita). Jos laitat sen syrjään ja yrität piirtää loput kirjaimet myöhemmin, ne ovat taatusti erilaisia, ja kestää hetken ennen kuin "virittää kättäsi" ja alkaa pudota yleiseen tyyliin.
Fontin piirtäminen on kaikista luovin prosessi. Jos naiivisti uskot, että kirjasimien luomisessa on kyse luovuudesta ja inspiraation juhlasta, kiirehdin tuottamaan sinulle pettymyksen: luovuus ja kirjainten piirtäminen vievät enintään 20 % (yleensä vähemmän) fontin luomiseen kuluvasta ajasta. Loput on tekniikkaa: skannaus, käsittely, aakkosten kohdistaminen, viritys, vienti ohjelmaan, väli ja välitys, koodiasetukset, testaus ja kaikki muu. Siksi, jos haluat vain piirtää kirjaimia, ja sinun on tylsää edes ajatella teknistä osaa, on parempi luoda kirjaimet.
DIGITAALINEN OSA PROSESSISTA
Kun fontti on piirretty, on aika digitoida se. Käsittelyketjuni näyttää tältä: skanneri - photoshop - kuvittaja. Skannerissa asetan maksimiasetukset, Photoshopissa lisään kontrastia ja siivoan hieman ääriviivoja, Illustratorissa teen jäljen, löydän aakkoset (eli järjestän kirjaimet peräkkäin, yritän "koota" muutama sana tarkistaaksesi miltä kaikki näyttää) ja puhdas-siivoa- puhdistan kirjaimet.
Puhdistusvaiheesta - Ajattelin ennen, että "miksi puhdistaa se, se on käsin kirjoitettu fontti." Mutta myöhemmin tämä yksityiskohta paljastettiin: mitä enemmän pisteitä vektorissa, sitä suurempi on todennäköisyys, että fontti on buginen kaikin mahdollisin tavoin - Glyphs (tai muu ohjelma, jossa fontti kootaan) kieltäytymisestä viedä tiedostoa , koska loppukäyttäjät eivät pysty käyttämään sitä virheettömästi. Siksi pisteiden vähimmäismäärä on avain mukavuuteen, ja kyllä, sinun on silti puhdistettava ne, jopa teksturoidut fontit.
Puhdistan kirjaimet Illustratorissa useilla tavoilla: ensinnäkin Astute Graphicsin maagisella pyyhekumilla (osa maksullinen laajennus, josta puhun), valitettavasti en tiedä ilmaista, vähintään likimääräistä laatua olevaa vaihtoehtoa, toiseksi tavallisella kuvittajan kynällä - korostan ääriviivat ja tarkentelen sitä.
Sen jälkeen teen fontin valmiiksi vientiä varten - tämä on erillinen iso tarina, josta tulee todennäköisesti useita videoita - ja siirrän kirjaimet Glypheihin.
HYVÄ FONTTIOHJELMA ON TÄRKEÄÄ
Fontin kokoaminen eli vektorikirjaimien muuttaminen toimiviksi, näppäimistöllä kirjoitettavissa oleviksi, voidaan teoriassa tehdä eri ohjelmissa. Googlettamalla löydät vaikuttavia vaihtoehtoja jokaiseen makuun ja budjettiin. En luettele tässä nimiä, koska en ole valmis suosittelemaan jotain, jota en tiedä/ole koskaan kokeillut. Työskentelen Glyphs-ohjelmassa ja tiedän vain, että kaikki vakavat kirjasinsuunnittelijat (kirjasimia myyvät) tekevät ne joko Glyphsissa tai Fontlabissa. Tämä johtuu todennäköisesti siitä, että halvemmat/ilmaiset ohjelmat eivät tarjoa kaikkia vaihtoehtoja, joita tarvitset mielenkiintoisten kirjasintarinoiden luomiseen.
Aikoinaan valitsin Glyfit, koska halusin toisaalta heti tottua "oikeaan" kirjasinohjelmaan (eli sellaiseen, jolla voidaan luoda todella harkittuja, monimutkaisia, elementtirikkaita kirjasimia, eikä se jää kiinni. noin kuukauden ajan jossain ilmaisessa). Myöhemmin selvisi, ettei ehdollisia ligatuureja voi luoda), toisaalta en ollut valmis maksamaan monta kertaa enemmän Fontlabista. Ilmeisesti valinta oli oikea - tiedän ihmisiä, jotka vaihtoivat Fontlabista Glyphsiin ja sanovat, että jälkimmäisellä on selkeämpi käyttöliittymä :)
Hyvä fonttiohjelma on tärkeä, koska siellä tapahtuu vain kirjainten maaginen muunnos toimivaksi fontiksi. Jos ohjelma ei salli sinun luoda kielitukea, et voi luoda sitä. Jos et voi lisätä vaihtoehtoista isoja kirjaimia, et voi lisätä niitä, vaikka olisit jo piirtänyt ne.
Glyphs-sovellukseen viennin jälkeen määritin paljon erilaisia asioita: kirjainryhmät, välilyönnit (karkeasti sanottuna negatiivinen tila kirjainten vasemmalla ja oikealla puolella), kerning (tiettyjen kirjainparien väliset etäisyydet), kielituen lisääminen, ligatuurit (erikoisarvot). kirjainyhdistelmien muunnelmia), alku- ja loppuvaihtoehdot (pitkillä poninhännillä, swashilla, kukoistavilla ja kaikella muulla) ja vaihtoehtoisia sarjoja, jos niitä ehdotetaan. Matkan varrella koodi on konfiguroitu niin, että kaikki toimii loppukäyttäjälle tarkoitetulla tavalla ja ilman ongelmia. Tämä vaihe, jonka kuvailin parilla lauseella, on itse asiassa se, mikä vie noin 70% ajasta fontin luomiseen :) Ja en kuvaile sitä lyhyesti, en siksi, että olisin ahne, vaan koska pelkästä kerningistä voisi kirjoittaa. muistiinpano kolme kertaa pidempään kuin tämä, eikä se silti riitä. Kirjasimia käsittelevällä kurssilla käsittelen kaikkia näitä kohtia erittäin yksityiskohtaisesti (tällä hetkellä yritän löytää rajan "ei tarpeeksi yksityiskohtaista" ja "liian paljon sulateltavaa tietoa" välillä).
Tässä artikkelin opetusohjelmassa kerron sinulle, kuinka voit luoda oman fontin verkkosivustolle käyttämällä itse luomiasi kuvakkeita. Tarvitsemme tähän vain ohjelman vektorigrafiikan luomiseen (Adobe Illustrator tai Inkspcape) ja Internet-yhteyden! Joten aloitetaan! Voit ladata kaikki tähän käytetyt kuvat, kuvakkeet ja css-fontin artikkelin lopusta.
Tätä opetusohjelmaa varten teemme jotain yksinkertaista. Ensimmäiselle kuvakkeelle piirrämme tavallisen tähden. Toiselle kuvakkeelle - kotka, jonka sisällä on kirjain W. Se on melko helppo piirtää ja voit luoda mitä tahansa muotoja ja yhdistelmiä. Näihin tarkoituksiin käytin kuvittajaa.
Kun olet suorittanut luovan osan, luomuksesi on tallennettava SVG-muodossa. Napsauta "Tallenna nimellä" ja valitse tiedostotyypiksi SVG. Nyt voit jatkaa suoraan fontin luomiseen.
Näihin tarkoituksiin käytämme suosittua ja ilmaista IcoMoon-palvelua.
Ensimmäinen asia, joka sinun tulee tehdä, on luoda uusi projekti, joten napsauta vasemmassa yläkulmassa olevaa valikkoa ja napsauta "Uusi projekti". Seuraavaksi lataamme valmiit svg-tiedostomme napsauttamalla "Tuo kuvakkeet" -painiketta. Kun olet suorittanut nämä vaiheet, sinun pitäisi nähdä seuraavanlainen kuva näytölläsi:
Nyt meillä on mahdollisuus muuttaa jokaisen kuvakkeen koodia (tapauksessamme se on e600 ja e601), fonttimme nimeä, CSS-etuliitettä ja niin edelleen. Kaikki tämä tehdään "Asetukset" -kohdassa. Näemme myös fontin toiminnassa napsauttamalla "Ota käyttöön pikakäyttö" -linkkiä - jonka avulla voimme saada väliaikaisen linkin kirjasimeemme sekä mahdollisuuden tarkastella koodia CodePenissä.
Kun olet määrittänyt kaiken, napsauta sivun alareunassa olevaa "Lataa" -painiketta ja lataa arkisto. Tästä arkistosta löydät fonttisi ttf-, eot-, svg- ja woff-muodoissa sekä esittelysivun fontilla.
Sivuston kuvakkeiden käyttäminen
Nyt meidän tarvitsee vain sisällyttää CSS-fontti @font-face-komennolla ja määrittää muut parametrit (ne kaikki on kirjoitettu lataamasi arkiston css-tiedostoon.
@font-face ( font-family: "wdm-eagle"; src: url("//websitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; puhu: ei mitään; kirjasintyyli: normaali; fontin paino: normaali; fontin variantti: normaali; tekstin muunnos: ei mitään; rivin korkeus: 1; /* Parempi fontin renderöinti =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: harmaasävy; ) .wdm-star:before ( sisältö: "\e600"; ) .wdm-eagle:before ( sisältö: "\e601"; )
Nyt voimme käyttää fonttiamme HTML-koodissa näin:
Luokan nimen määrittäminen tagille saamme kuvakkeen.
