Oma fondi loomine veebiarenduseks. Kuidas teha html-is ilusat fonti: suurused, värvid, html-fondisildid

Tere kõigile! Täna tahan veebidisaini osana rääkida fontidest, mida tuleks veebisaidi arendamisel kasutada.

Reeglina ei mõtle kõik sellele, milliseid fonte saidi sisu osas kasutada. Veebisaidi jaoks ilusate fontide valimine on disaini arendamise kõige olulisem osa. Kuna saidi teabe loetavus sõltub sellest osast ja nagu me teame, on see saidil kõige olulisem. Sel põhjusel tuleks seda küsimust väga tõsiselt võtta.

Kuid veebisaidi kujundamisel saate kasutada ainult fonte, mis on saadaval tulevastele saidi külastajatele. Seda tehakse selleks, et tagada lehtede õige kuvamine kõikidele kasutajatele, erinevate operatsioonisüsteemide ja brauserite puhul. Vastasel juhul, kui kasutate mittestandardseid fonte, näeb enamik külastajaid kõike erinevalt ja enamikul juhtudel inetult. Sel põhjusel on soovitatav kasutada allpool loetletud standardfonte. Fontide loend sisaldab fonte, mis on installitud operatsioonisüsteemi Windows XP ja uuematesse versioonidesse.

Selles artiklis ei käsitle ma teiste operatsioonisüsteemide fonte. Kogenud küljendaja peaks teadma fontide võrdlust erinevates operatsioonisüsteemides ja küljenduse ajal kirjutab ta selle punkti CSS-stiilidesse.

Põhimõtteliselt kasutatakse kujunduse sisuosa väljatöötamisel kahte tüüpi fonte:

• serif-fondid
• sans-serif fondid

Serif-fondid- (inglise serif - serif) fondid, mille stiil algab ja lõpeb tõmmetega. Näiteks Times New Roman.

Sans serif fondid(tükeldatud fondid) - (inglise sans-serif - sans serif) rangete sirgete joontega fondid ilma serifideta. Näiteks Arial.

Allpool näete serif- ja sans serif-fondide ekraanipilti.

Fondid veebidisaini jaoks:

• Arial
• Arial must
• Arial Kitsas
• Raamat Antiqua
• sajandi gootika
• Koomiks Sans MS
• Kuller Uus
• Franklini gooti meedium
• Gruusia
• Mõju
• Lucida konsool
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino linotüüp
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Võrgud (erinevad sümbolid ja märgid)
• Tiivad (erinevad sümbolid ja märgid)

Tahaksin ka märkida, et paljudes kirjatüüpides pole kaldkirja, kasutatakse kaldu, mis muudab teksti raskesti loetavaks.

Windowsi standardfondidest, millel pole kaldkirja:

• Arial must
• Koomiks Sans MS
• Franklini gooti meedium
• Mõju
• Lucida konsool
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Kuna mainisin fonte, millel pole kaldkirja, siis tahaksin märkida ka tõsiasja, et on fonte, mis on esialgu paksus kirjas. Nendel põhjustel pole mõtet kasutada stiile, mis tähistavad paksu kirjatüüpi, kuna tulemus pole see, mida vajame.

Selles artikliõpetuses räägin teile, kuidas luua veebisaidi jaoks oma fonti, kasutades enda loodud ikoone. Selleks vajame ainult vektorgraafika loomiseks mõeldud programmi (Adobe Illustrator või Inkspcape) ja Interneti-juurdepääsu. Kõik selleks kasutatud pildid, ikoonid ja css-fondi saate alla laadida artikli lõpus.

Selle õpetuse jaoks teeme midagi lihtsat. Esimese ikooni jaoks joonistame tavalise tähe. Teise ikooni jaoks - kotkas, mille sees on W-täht. Seda on üsna lihtne joonistada ja saate luua mis tahes kujundeid ja kombinatsioone. Nendel eesmärkidel kasutasin illustraatorit.

Pärast loomingulise osa täitmist tuleb teie looming salvestada SVG-vormingus. Klõpsake "Salvesta nimega" ja valige failitüüp SVG-ks. Nüüd saate jätkata otse fondi loomisega.

Nendel eesmärkidel kasutame populaarset ja tasuta teenust IcoMoon.

Esimese asjana peate looma uue projekti, nii et klõpsake vasakus ülanurgas menüül ja klõpsake nuppu "Uus projekt". Järgmisena laadime oma valmis svg-failid pärast nupu "Impordi ikoone" klõpsamist. Pärast nende toimingute tegemist peaksite oma monitoril nägema sellist pilti:

Nüüd on meil võimalus muuta iga ikooni koodi (meie puhul on see e600 ja e601), fondi nime, CSS-i eesliidet jne. Kõik see tehakse jaotises "Eelistused". Samuti näeme fonti töös, klõpsates lingil "Luba kiirkasutus", mis võimaldab meil hankida ajutise lingi meie fondi juurde, samuti saate koodi CodePenis vaadata.

Kui olete kõik konfigureerinud, klõpsake lehe allosas nuppu "Laadi alla" ja laadige arhiiv alla. Sellest arhiivist leiate oma fondi ttf-, eot-, svg- ja woff-vormingus + fondiga demolehe.

Ikoonide kasutamine saidil

Nüüd on meil vaja ainult lisada CSS-i font, kasutades @font-face, ja määrata muud parameetrid (need on kõik kirjutatud allalaaditud arhiivi css-faili.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; kõnele: none: font-variant: normal line-height: 1 -smoothing: halltoonid; .wdm-star:before ( sisu: "\e600"; ) .wdm-eagle:before ( sisu: "\e601"; )

Nüüd saame kasutada oma fonti HTML-koodis järgmiselt:

Märgendi klassi nime määramine saame oma ikooni.

Ma pole tükk aega midagi kirjutanud, aga noh.
Hetkel tegelen veebiarendusega ja tekkis küsimus ilusa menüü kohta. Animatsiooniga, kuid ilma JS-i või Flashita. Loomulikult toimub see kõik CSS3 abil ja lisaks ei hakka me kasutama pilte. Üleüldse.

Käivitame selle, näeme akent

Avage "Tekst > SVG Font Editor...", paremale ilmub paneel

Klõpsake fondi 1, muutke see oma fondi nimeks, näiteks MySomeFont, ja tühjendage parempoolne väli *Typeface*.

Nüüd avage vahekaart *Glyphs* kõik meie paneelil *SVG Font Editor*. Nagu näeme, on ingliskeelse paigutuse glüüfid meie jaoks juba lisatud. Saate kõik kustutada, kui see teele jääb, paremklõpsates sellel. Samuti saate redigeerida glüüfi nime ja sümbolit, mida see tuvastab

Hakkame pilte ise lisama.

Importige "Fail > Impordi..." (Ctrl+I) pilt, mille tahame fonti lisada. Kui see on rastergraafika, peate pärast selle lisamist tegema "Outline > Vectorize Raster" (Alt + Shift + B). Isiklikult ma valikute kallal ei vaevanud, klõpsa lihtsalt *OK* ja luuakse vektorpilt.

Kustutame rasterliku (Vali see ja vajuta klahvi Delete) - objekti valimisel on reale allosas kirjas, kas tegemist on raster- (Pilt) või vektoriga (Outline).

Järgmisena venitage kontuur tööalale (ülemisel paneelil on sisestusalad - x: 0, y: 0; L: 1000 ja K: 1000). Jätan kontuuri valitud, minge vahekaardil *Glyphs* meie lemmikpaneelile *SVG Font Editor*. Nüüd valige glüüf, mille tahame oma kontuuriga seostada. Olgu selleks glüüf sümboliga *a*. Seejärel klõpsake lihtsalt nuppu *Hangi kõverad valikust*. Kontrollimaks, kas tegime kõik õigesti, sisestage lihtsalt lisatud sümbol allolevale väljale *Tekst* ja kuvatakse meie pilt. Pärast kontrollimist saab kontuuri tööalast kaugemale nihutada või seda pole enam vaja.

Samuti saame kõik fondi kasutamata märgid mõne kontuuriga seostada, kasutades *Võta valikust* teksti *Missing Glyph* vahekaardil *Glyphs*. Toiming toimub ülalkirjeldatud viisil.

Üldiselt lisasime oma sümbolitele kõik kontuurid. Nüüd peame XML-faili ennast veidi redigeerima. Ava *XML-redaktor* (Shift+Ctrl+X) – nupp on põhipaneelil – paremalt neljas. Ja me peame muutma üksuse *id* atribuuti *

@font-face (
fondiperekond: "MySomeFont";
src: url("fonts/font.svg") formaat("svg");
}

Noh, üldiselt on see kõik.

Oma veebisaidi jaoks õige fondi leidmiseks on tohutult palju võimalusi. Näiteks saate kasutada teenuseid tohutute fondikogudega, mis nõuavad tasulist tellimust.

Kui teil on väike eelarve või katsetate väikest projekti, saate kasutada tasuta veebifonte, mis on avalikult saadaval. Oma veebisaidi jaoks sobiva veebifondi leidmine võib olla aeganõudev, seega esitame teile valiku nende hulgast parimatest.

1. Montserrat

Tüpograafia arenedes eemaldub see vanaaegsetest linnaplakatitest ja siltidest. Selle fondi looja püüdis säilitada Buenos Airese tänavatel nähtud linnaplakatite tüpograafia ilu.

2. Abril Fatface

Abril Fatface on osa suurest fondiperest, mis on saadaval 18 erineval otstarbel loodud stiilis. Sellel fontil on tugev ja elegantne välimus, mis teeb sellest suurepärase lahenduse pilkupüüdvate pealkirjade loomiseks. Kõige sagedamini kombineeritakse seda Lato, Open Sansi ja Droid Sansiga.

3. Playfairi väljapanek

Arvestades olulist x-kõrgust ja tähtede väikeseid alaindeksiid, sobib Playfair Display ka pealkirja kirjutamiseks, eriti kui ruumi on vähe. See sobib hästi Gruusiaga ja seda kasutatakse sageli Oswaldi, Lato ja Arvoga.

4. GT Walsheim

Tänapäeval paljudes ajaveebides kasutatav GT Walsheim on geomeetriliste sans serifide esindaja ja kuulub Grilli Type perekonda. Peate maksma kogu fontide komplekti eest, kuid Grilli Type pakub GT Walsheimi tasuta prooviversiooni.

5. Merriweather

Kui ekraanil loetavus on teie projekti jaoks prioriteet, vaadake Merriweatherit, mis loodi selleks otstarbeks. Lisaks täiustatakse seda fonti pidevalt.

6. Josephine Sans

Josefin Sans on inspireeritud vintage Rootsi disainist ja sellel on elegantne geomeetriline esteetika.

7. Gravitas One

Gravitas One põhineb Inglismaal tööstusrevolutsiooni ajal ilmunud julgel reklaamfondil "UK fat face". See font näeb hea välja keskmises ja suures mastaabis ning sobib pealkirjade, pealkirjade ja vahekaartide jaoks.

8. Jura

Selle fondi tähed kordavad Kaya-li tähe vorme. See sisaldab ka kirillitsa ja kreeka tähestiku glüüfe. See on saadaval kerge, tavalise, keskmise ja paksu kaaluga.

9.Liiga gootika

Algselt Morris Fuller Bentoni poolt 1903. aastal ettevõttele American Type Founders Company kavandatud League Gothic leidis värskenduse ja uute glüüfide lisamisega uue kasutuse.

10. Fjord

Fjord on algselt trükitud raamatute jaoks loodud serif-font, mis sobib eriti hästi pika teksti mahutamiseks väikesesse trükivormingusse. Seda saab kasutada saidil suure hulga tekstisisu loomiseks, kuna fondil on selge struktuur, silmapaistvad serifid ning pikad elegantsed pead ja jalad.

11. Amarant

Amaranthi fondiperekonnal on mittekaldus kaldkirjas kujundus, millel on vähe kontrasti ja märgatavad kõverad. Kõik kolm Amaranthi stiili sobivad hästi peaaegu kõigi teiste fondidega. Saate selle fontiga mängida – katsetage ja valige parim.

12. Poly

See keskmise kontrastsusega font loodi algselt põlisrahvaste Wayuunaiki keele jaoks, mis nõuab laia glüüfi. Sellel on väikesed varred ja suur x-kõrgus, mistõttu on see eriti kasulik väikestes suurustes.

13. Gentium Basic

See font loodi mitmekeelse fontina, mis sisaldab ladina ja kreeka tähti, samuti kirillitsat ja täiustatud tuge Gentium Plusi versioonis. Gentium Basic ja Gentium Book Basic on saadaval tasuta veebiversioonis, kuid need on piiratud ainult ladina tähestikuga.

14. Avage Sans

Open Sans on humanistlike groteskide esindaja. See font on hästi loetav ja kohandub nii veebi- kui ka mobiililiidestega. Tegemist on lihtsa tähestiiliga mittekaldkirjaga kirjatüübiga, mida iseloomustab neutraalne, kuid piisavalt meeldiv välimus, et seda saab kasutada mitmel otstarbel.

15. Pearaamat Regulaarne

See on multifunktsionaalne font, millel on suur x-kõrgus, tugev värvikontrast ja hästi määratletud serifid, mis aitavad kaasa teksti loetavusele. See font näeb hea välja nii trükituna kui ka madala eraldusvõimega ekraanil.

16. Signika

See tasuta veebifont esindab sans serifi. Madal kontrast ja kõrge x-kõrgus võimaldavad Signikal ekraanil hästi kuvada. Lai valik ikoone sisaldab sümboleid, piktogramme ja nooli.

17. Josefin Slab

Josefin Slab on loodud 1930. aastatele omase geomeetrilise fondi kaanonite järgi, millele on lisatud skandinaaviapäraseid jooni, ja sellel on tahvlifondi tunnused ja see meenutab kirjutusmasina fonti. Huvitaval kombel on selle x-kõrgus pool suurtähe kõrgusest.

18. Foorum

Nagu nimigi ütleb, on see rooma font, mis sobib hästi suurtähelukuga pealkirjade jaoks, kuid sobib ka teksti kuvamiseks. Selle fondi elegantsed proportsioonid meenutavad poolringikujuliste kaarte, horisontaalsete karniiside ja vertikaalsete sammastega klassikalist arhitektuuri.

Ühe kuulsaima maiade linna järgi nime saanud Tikal Sansil on glüüfide tunnused, mida kasutati Lõuna-Ameerika tsivilisatsiooni kirjutamisel. Selle looja valis suure x-kõrguse, mis annab fondile kaasaegse välimuse ja mõjutab soodsalt selle loetavust ning suur stiilivalik võimaldab seda kasutada erinevatel eesmärkidel.

20. Arvo

See geomeetriline tahvlifont, mis sobib nii printimiseks kui ka veebis kasutamiseks, on saadaval ladina, kaldkirjas, rooma paksus ja paksus kaldkirjas. Arvo madal kontrastsus suurendab selle ekraanil loetavust.

21. Bevan

Bevan loodi 1930. aastate traditsioonilise plaadifondi põhjal. Tähed digitaliseeriti, said uue kuju ja optimeeriti veebiversiooni jaoks. See on üks väheseid ülipaksaid fonte, mis veebisaitidele sobivad.

22. Vana standardne TT

Old Standard TT põhines Modern serif-fondil, mis oli populaarne 19. sajandi lõpus ja 20. sajandi alguses ning jäeti seejärel pikaks ajaks unustusse. See font sobib stiili lisamiseks teatud tüüpi sisule, näiteks teadusuuringutele või kreeka või kirillitsas tekstidele.

23. Kreon

See serif-font, mis sobib ideaalselt uudiste veebisaitide ja ajaveebi jaoks, jagab ka plaadifondi omadusi, kuid selle tasakaal ja madal kontrast muudavad Kreoni oluliselt isikupärasemaks.

24. Droid Sans

Droid Sans on optimeeritud maksimaalse loetavuse tagamiseks isegi väikestes liidestes, näiteks mobiiltelefonide ekraanide menüüdes. See on neutraalne, mittekaldus font lihtsate avatud tähevormidega.

25. itaalia keel

Selle fondi looja sai inspiratsiooni klassikalisest itaalia kalligraafiast, nii et font on väga kasulik projektide jaoks, kus on vaja elegantsi lisada. Italiana sobib ka uudiste pealkirjade kirjutamiseks nii trükitud kui ka elektroonilisel kujul.

26. Vollkorn

See üksikasjalik ja funktsioonirikas serif-font on väga populaarne. Selle selgus ja tugevus annavad edasi enesekindlust ja energiat, muutes fondi ühtviisi tõhusaks nii suuremates pealkirjades ja pealkirjades kui ka suurtes kogustes väiksemas vormingus tekstis.

27. Näitleja

See font on eriti suure x-kõrgusega, mis nõuab päris palju ruumi. Näitlejal on mõne tegelase, näiteks numbrite 6 ja 9 puhul vanamoodne stiil.

Humanistlikust kirjatüübist Garamond, mille juured ulatuvad 16. sajandisse, on saanud tõeline tüpograafiline ikoon, mis on sageli aluseks kaasaegsete kirjatüüpide, sealhulgas EB Garamondi, loomisel.

31. Ubuntu

Ubuntu Grotesque loodi veebiteksti isikupärastamiseks nii lauaarvutites kui ka mobiilseadmetes. Kasutajatel soovitatakse seda fonti katsetada, seda vastavalt oma äranägemisele muuta ja täiustada.

32. Rosario

Rosario on klassikaline humanistlik sans serif, mis sobib suurepäraselt tekstilõikude stiliseerimiseks.

33. Roboto plaat

Roboto Slab on üks Roboto perekonna fontidest. Eriti pilkupüüdev on plokkversioon oma geomeetriliste kujundite ja avatud kurvidega. See sobib ühtviisi nii vidinaekraanide kui ka tekstide trükitud versioonide jaoks.

34. Oswald

Font on klassikalise Alternate Gothic sans serif ümbertöödeldud versioon. Oswaldi värskendati hiljuti, et pakkuda erinevaid kaalusid, laiendatud märgikomplekti ja paremat kerningut.

35. Patiseis

Stalemate on klanitud käsitsi kirjutatud font, millel on veidi vanaaegset hõngu. See sobib aktsentide loomiseks ja veebisaidi isikupärastamiseks.

36. Karmiinpunane tekst

Seda hoolikalt disainitud klassikalist proportsionaalset fonti saab kasutada nii suure hulga teksti kuvamiseks kui ka pealkirjade kirjutamiseks.

HTML-is mängib fondi suurus olulist rolli. See võimaldab juhtida kasutaja tähelepanu saidi lehele postitatud olulisele teabele. Kuigi oluline pole mitte ainult tähtede suurus, vaid ka nende värv, paksus ja isegi perekond.

Sildid ja atribuudid html-fondidega töötamisel

Hüperteksti keeles on lai valik tööriistu fontidega töötamiseks. Teksti vormindamine on ju html-i põhiülesanne.

HTML-keele loomise põhjuseks oli probleem tekstivormingu reeglite kuvamisel brauserites.