Lidhja e shkronjave të uebit duke përdorur @font-face. Çështja ligjore e përdorimit të shkronjave

Tekst i trashë

Tekst i trashë

Më shumë se zakonisht

Më pak se zakonisht

Kursivë

Kursivë

Me nënvizim

E kryqëzuar

Aftësitë e atributeve të stilit

Përveç etiketave të përshkruara, ka disa mënyra të tjera për të ndryshuar fontin në html. Një prej tyre është përdorimi i atributit të stilit të përgjithshëm. Duke përdorur vlerat e vetive të tij, mund të vendosni stilin e shfaqjes së shkronjave:

1) font-family – vetia përcakton familjen e shkronjave. Është e mundur të renditen vlera të shumta.
Ndryshimi i fontit në html në vlerën tjetër do të ndodhë nëse familja e mëparshme nuk është e instaluar në sistemin operativ të përdoruesit.

Shkrimi i sintaksës:

font-family: font-name [, font-name[, ...]]

2) madhësia e shkronjave – madhësia vendoset nga 1 në 7. Kjo është një nga mënyrat kryesore për të rritur fontin në HTML.
Shkrimi i sintaksës:

madhësia e shkronjave: madhësia absolute | madhësia relative | kuptimi | interesi | trashëgojnë

Ju gjithashtu mund të vendosni madhësinë e shkronjave:

• Në pixel;
• Në terma absolutë ( xx-i vogël, x-i vogël, i vogël, i mesëm, i madh);
• Në përqindje;
• Në pikat (pt).

Madhësia e shkronjave: 7

Madhësia e shkronjave: 24 px

Madhësia e shkronjave: x-large

Madhësia e shkronjave: 200%

Madhësia e shkronjave: 24 pt

stili i fontit: normal | italik | i zhdrejtë | trashëgojnë

Vlerat:

• normal – drejtshkrim normal;
• italic – italic;
• oblique - font i pjerrët djathtas;
• inherit – trashëgon drejtshkrimin e elementit prind.

Një shembull se si të ndryshoni fontin në html duke përdorur këtë pronë:

font-style:trashëgoj

stili i shkronjave: italic

stili i shkronjave: normale

stili i shkronjave: i zhdrejtë

font-variant: normal | kapak të vegjël | trashëgojnë

Një shembull se si të ndryshoni fontin në html me këtë pronë:

font-variant:trashëgoj

font-variant:normal

font-variant:small-caps

pesha e shkronjave: e theksuar | më e guximshme | më e lehtë | normale | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Vlerat:

• bold – vendos fontin html në bold;
• më i guximshëm - më i guximshëm në krahasim me normalen;
• më i lehtë - më pak i ngopur në krahasim me normalen;
• normal – drejtshkrim normal;
• 100-900 – vendos trashësinë e shkronjave në ekuivalent numerik.

pesha e shkronjave: bold

pesha e shkronjave: më e guximshme

pesha e shkronjave: më e lehtë

pesha e shkronjave: normale

pesha e shkronjave: 900

pesha e shkronjave: 100

Vetia e shkronjave html dhe ngjyra e shkronjave

Fonti është një tjetër veçori e kontejnerit. Brenda vetes, ai kombinoi vlerat e disa vetive të destinuara për ndryshimin e shkronjave. sintaksa e shkronjave:

font: font-size font-family | trashëgojnë

Vlera gjithashtu mund të vendoset në fontet e përdorura nga sistemi në etiketat në kontrolle të ndryshme:

• titull - për butona;
• ikona - për ikonat;
• menu - menu;
• mesazh-kuti – për kutitë e dialogut;
• mbishkrim i vogël - për kontrolle të vogla;
• status-bar – fonti i shiritit të statusit.

Në këtë tutorial artikulli do t'ju tregoj se si të krijoni fontin tuaj për një faqe interneti duke përdorur ikonat që keni krijuar vetë. Gjithçka që na nevojitet për këtë është një program për krijimin e grafikës vektoriale (Adobe Illustrator ose Inkspcape) dhe akses në internet Pra, le të fillojmë! Ju mund të shkarkoni të gjitha imazhet, ikonat dhe fontin css të përdorur për këtë në fund të artikullit.

Për këtë tutorial do të bëjmë diçka të thjeshtë. Për ikonën e parë do të vizatojmë një yll të rregullt. Për ikonën e dytë - një shqiponjë me shkronjën W brenda. Vizatimi është mjaft i thjeshtë dhe mund të krijoni çdo formë dhe kombinim. Kam përdorur illustrator për këto qëllime.

Pasi të keni përfunduar pjesën krijuese, krijimi juaj duhet të ruhet në formatin SVG. Klikoni "Ruaj si" dhe zgjidhni llojin e skedarit si SVG. Tani mund të vazhdoni drejtpërdrejt në krijimin e fontit.

Për këto qëllime, ne përdorim shërbimin popullor dhe falas IcoMoon.

Gjëja e parë që duhet të bëni është të krijoni një projekt të ri, kështu që klikoni në menunë në këndin e sipërm të majtë dhe klikoni "Projekt i ri". Më pas, ngarkojmë skedarët tanë të gatshëm svg pasi klikojmë në butonin "Importi ikonave". Pas përfundimit të këtyre hapave, duhet të shihni një imazh të tillë në monitorin tuaj:

Tani kemi mundësinë të ndryshojmë kodin për secilën ikonë (në rastin tonë do të jetë e600 dhe e601), emrin e fontit tonë, prefiksin CSS, e kështu me radhë. E gjithë kjo bëhet në "Preferencat". Gjithashtu, ne mund ta shohim fontin në veprim duke klikuar në lidhjen "Aktivizo Përdorimin e Shpejtë" - që do të na lejojë të marrim një lidhje të përkohshme me fontin tonë, si dhe opsionin për të parë kodin në CodePen.

Pasi të keni konfiguruar gjithçka, klikoni butonin "Shkarko" në fund të faqes dhe shkarkoni arkivin. Në këtë arkivë do të gjeni fontin tuaj në formatet ttf, eot, svg dhe woff + një faqe demo me fontin.

Përdorimi i ikonave në sit

Tani, gjithçka që na duhet është të përfshijmë fontin CSS duke përdorur @font-face dhe të specifikojmë parametra të tjerë (të gjithë janë të shkruar në skedarin css në arkivin që keni shkarkuar.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; fol: asnjë font-stil: normal font-height: 1 /* Better Rendering font-smoothing; -smoothing: grayscale;

Tani mund të përdorim fontin tonë në kodin HTML si kjo:

Përcaktimi i emrit të klasës për etiketën ne marrim ikonën tonë.

Ne ju paraqesim një përzgjedhje shërbimesh falas për dizajnerët. Ky është opsioni i parë, ne planifikojmë ta zgjerojmë në të ardhmen duke shtuar seksione dhe mjete të reja.

Fontet

• Google Fonts është biblioteka e fontit të preferuar të të gjithëve. Ju lejon të zgjidhni dhe shkarkoni fonte të ndryshme për të gjitha rastet.
• 1001 Fontet e lira - biblioteka e shkronjave. Ka navigim të lehtë - fontet renditen si sipas alfabetit ashtu edhe sipas llojit. Ekziston një pjesë e shkronjave ruse.
• Fontstruct është një projektues i shkronjave në internet. Një mjet shumë i thjeshtë që do t'ju lejojë të krijoni fontin tuaj. Ju mund të vizatoni jo vetëm me katrorë standardë, por edhe me forma të tjera - pika, qoshe të rrumbullakosura, etj. Për një fillestar, është një mjet ideal për të provuar dhe parë tipografinë në veprim.
• Font Squirrel është një nga bibliotekat më të mëdha të shkronjave. Përveç kësaj, mund të ngarkoni një foto dhe të merrni emrat e shkronjave të përdorura në të. Ka një dyqan shkronjash, madje edhe një dyqan veshjesh me logo.
• Type light është një redaktues fonti me funksione të plota. Ju lejon të krijoni, modifikoni dhe konvertoni fontet OpenType, TrueType dhe PostScript. Duhet të shkarkohet dhe të instalohet. Versioni falas ka funksionalitet të kufizuar në krahasim me versionin falas. Por është e mjaftueshme për të krijuar një font të thjeshtë.
• Çfarë është Font është një shërbim online për zgjedhjen e shkronjave të faqeve në internet. Ne shkarkojmë skedarin e shkronjave, tregojmë url-në e faqes dhe shohim se si do të duket fonti i shkarkuar në sit. Shërbim i përshtatshëm.
• 1001 Fonts - biblioteka e shkronjave (më shumë se 15,000). Lundrim i lehtë – fonti mund të zgjidhet sipas madhësisë, llojit, temës, dizajnit, etj. Menyja ju lejon të personalizoni daljen, gjë që bën të mundur shikimin e secilit font në opsione të ndryshme: madhësia, stili, etj.
• Font Flame është një shërbim online për zgjedhjen e një çifti shkronjash të pajtueshme. Ajo funksionon shumë thjesht - në faqen kryesore ka një fletë me dy mbishkrime të bëra me shkronja të ndryshme. Nëse ju pëlqeu, klikoni "Dashuri" nëse nuk ju pëlqeu, klikoni "Urrejtje". Pastaj mund t'i shikoni përsëri ato të zgjedhura. Klikimi mbi emrin e fontit hap Google Fonts.
• Typecast – zgjedhja e një fonti për prototipin. Ju mund të shihni se si do të duket fonti në çdo pajisje. Është e nevojshme të identifikohen lloje të ndryshme teksti - tituj, thonjëza, etj. Ju mund të zgjidhni një tipografi, madhësi, stil dhe të vendosni dhëmbëza. Ju do të shihni faqen tuaj të ardhshme në fontet që keni instaluar. Një plus i madh është zgjedhja e paraqitjes (një kolonë ose disa, rregullime të ndryshme blloku).
• Wordmark - ju lejon të zgjidhni fontin e instaluar në kompjuterin e përdoruesit për tekstin, logon ose titullin. Kur futni tekst në një fushë, ai e shfaq atë me shkronja të ndryshme. Ju mund të zgjidhni madhësinë, të regjistroheni, të shfaqni bardh e zi ose anasjelltas. Opsionet që ju pëlqejnë publikohen në Twitter ose në Facebook - sipas zgjedhjes së përdoruesit. Mund të dërgohet me email.

Fotot e aksioneve

• Unsplash është një stok fotografish i përditësuar vazhdimisht. Koleksionet ndahen në tema. Ju mund të gjeni çdo gjë nga "afro-amerikane" në "Nature". Çdo foto ka vlerësimin e vet, ju mund të shihni më të mirat ose të rejat.
• FoodiesFeed – foto ushqimore. Imazhet ndahen në kategori. Ju mund të zgjidhni më të mirat, ekskluzive, ikona, modele, etj.
• Fotografitë Refe Falas - një listë e madhe e imazheve të "jetës reale". Kryesisht fotografi e peizazhit dhe natyrës. Lundrim i papërshtatshëm, të gjitha fotot në faqen kryesore shfaqen kur lëvizni.
• Little Visuals – foto me cilësi të lartë të peizazheve dhe ndërtesave. Mund të shkarkoni një arkiv të fotove më të mira të postuara gjatë javës. Fotografitë janë etiketuar me hashtags, por nuk janë të kategorizuara.
• Gratisography është një bibliotekë e madhe me fotografi falas. Të gjitha fotot janë të ndara në gjashtë tema: njerëz, grimasa, qytete, objekte, natyrë dhe kafshë. Mund të kërkoni me fjalë.
• Death to the Stock Foto – aksione foto. Nuk mund të shikosh dhe të zgjedhësh. Ata bëjnë një përzgjedhje një muaj përpara dhe ju lejojnë ta shkarkoni pasi të keni futur emailin tuaj. Arkivi peshon rreth 11 MB. Fotografitë më të mira dhe një lidhje shkarkimi dërgohen me email.
• Superfamous – një koleksion i madh fotografish nga një kënd i pazakontë. Kompleti është i vogël por interesant.
• Biblioteka e modeleve - modele dhe tekstura. Kompleti është mjaft i madh, shabllonet janë të pazakontë. Ato zëvendësohen me lëvizje, dhe gradualisht. Mund të shihni se si do të duket shablloni në të gjithë ekranin ose në një pjesë të tij.
• Stoku i ri i vjetër – foto të cilësisë së mirë nga arkivat. Ka pak foto falas, por të reja shfaqen rregullisht.
• Pexels – një numër i madh fotosh për të gjitha rastet. Ato janë të ndara sipas temës, shumë të lehta për t'u kërkuar.
• Jay Mantri - grup i madh fotografish. Nuk ka asnjë klasifikim si i tillë, mund ta shikoni me muaj.

Grafika e aksioneve

• Brusheezy – furça falas, shabllone, tekstura dhe më shumë për Photoshop. 12 kategori, secila me nënkategori. Zgjedhja është e madhe.
• Iconfinder - ikona, të paguara dhe falas. Mund të shkarkoni në formatet ICO, PNG, ICNS, SVG.
• Brushez është një koleksion i madh brushash për Photoshop. Përveç tyre, ekzistojnë edhe primitive vektoriale, forma, shabllone, stile. Çdo seksion është i ndarë në nënseksione. Për shembull, ka më shumë se 20 kategori për furçat.
• Vecteezy është një bibliotekë grafike vektoriale, duke përfshirë imazhe dhe ilustrime. Një numër i madh kategorish dhe një numër i madh grafikësh.
• Iconbird është një shërbim kërkimi i ikonave në gjuhën ruse. Mund të futni një temë dhe të merrni një grup ikonash, ose mund të shfletoni sipas kategorisë.
• Icons8 është një shërbim në gjuhën ruse që ofron më shumë se 42,000 ikona për tema të ndryshme.

Infografikë

• Vizualize është një shërbim në internet për krijimin e infografikës "Rreth meje". Në thelb krijon një rezyme grafike.
• Canva është një mjet i thjeshtë për të krijuar çdo dizajn. Ju lejon të krijoni një prezantim, poster, postim në rrjetet sociale, libra, letra, materiale dhe shumë më tepër. Gjithçka bëhet në bazë të shablloneve, teksti ndryshon. Por ka shumë shabllone për të zgjedhur.
• Lehtë – duke krijuar infografikë bazuar në shabllone. Redaktori i integruar në internet ju lejon të ndryshoni dizajnin, të vendosni elementë shtesë dhe të ndryshoni tekstin.
• Infogram është një shërbim online për krijimin e infografikëve dhe diagrameve interaktive. Jo të gjitha funksionet janë të disponueshme, do t'ju duhet të blini një llogari.
• Visage është një mjet i thjeshtë për krijimin e çdo përmbajtje vizuale (grafikë, infografikë, imazhe të blogut, etj.). Shumë shabllone, redaktues i thjeshtë. Disa veçori paguhen.
• Gliffy është një shërbim online për krijimin e diagrameve. Redaktori funksionon në parimin e Microsoft Visio.
• Visme është një mjet online për krijimin e prezantimeve dhe infografikëve. Më shumë se 1000 shabllone. Redaktori ju lejon të shtoni tekst (tituj, lista, citate dhe të rregullt), tekst të animuar dhe miniaplikacione. Në një llogari falas mund ta shkarkoni si skedar JPG.
• Piktochart - Krijoni grafika me cilësi të lartë - prezantime, infografikë ose materiale të printuara. Ngarkon PNG, JPG të madhësive të ndryshme.
• Drawio është një shërbim i përshtatshëm në internet për krijimin e diagrameve. Mund të ruani në dropbox dhe shërbime të ngjashme, ose në disk.
• Venngage – krijimi i lehtë i infografikëve, posterave, raporteve, materialeve për rrjetet sociale, etj. Në versionin falas, ofron vetëm një lidhje me publikimin. Ju duhet të paguani për shkarkimin.
• Cacoo është një shërbim online për vizatimin e diagrameve dhe hartave të faqes. Ndoshta më i miri për sa i përket aftësive. Një numër i madh mjetesh dhe shabllonesh. Mund të eksportoni në PNG, PDF, SVG, PPT, etj.
• Creately është një shërbim diagrami në internet. Në dispozicion vetëm për botim. Ka një pagesë për shkarkim.
• Lucidchart është një shërbim online për krijimin e diagrameve dhe vizatimeve. Është e mundur të importoni një diagram të Microsoft Visio. Eksporton në PDF, PNG dhe JPG. Ofrohet funksionalitet me pagesë.

Ngjyrat

• Color Hunt – përzgjedhja e kombinimeve të ngjyrave. Mund të zgjidhni deri në katër ngjyra. Ka zgjidhje të gatshme për të zgjedhur.
• TinEye – analizon sitin dhe shfaq një listë të burimeve që përdorin një imazh nga faqja.
• ColorZilla – ju lejon të krijoni ngjyra dhe gradient. Shfaq vetitë css për ta.
• Adobe Color CC – krijimi i skemave të ngjyrave.
• Colicious – shtypni shiritin e hapësirës dhe gjeneroni një ngjyrë të re.
• Skema e ngjyrave - përzgjedhja e skemave të ngjyrave. Ekziston një version në anglisht dhe rusisht. Ju lejon të zgjidhni ngjyrat për sitin. Ka akordim të mirë dhe tregon kodin e ngjyrave. Në fund të fundit, ju lejon të shikoni faqen në skemën e zgjedhur të ngjyrave. Avantazhi më i madh është shikimi i gamës përsa i përket devijimit të perceptimit të ngjyrave. Gjithashtu ju lejon të zgjidhni modele të ndryshme ngjyrash. Ruan Gimp, CSS, PNG, etj. në paleta. Ka një konvertues ngjyrash për konvertimin nga një model ngjyrash në tjetrin.
• Paletton është një mjet për krijimin e kombinimeve të ngjyrave. Nuk ndryshon nga Colorscheme.
• Pictaculous – Analizon paletën e një imazhi PNG, JPG ose GIF. Ngarkoni një imazh dhe merrni një grup të të gjitha ngjyrave që janë të pranishme në të.
• Vegla Hex Color - mjet për zgjedhjen e ngjyrave. Përdorni rrëshqitësit për të rregulluar ngjyrën dhe mund të zgjidhni ndriçimin. Ngjyra e zgjedhur më pas ruhet. Ju mund të zgjidhni një paletë.
• (Un)clrd është një shtojcë shfletuesi që heq të gjitha ngjyrat dhe e lë faqen bardh e zi.
• BrandColors - koleksioni më i madh i kodeve zyrtare të ngjyrave të markave. Zgjidhni emrin e markës dhe shkarkoni emrat e ngjyrave të saj, duke përfshirë skedarin css.
• Colortyper - përzgjedhja e ngjyrave nga një kënd i pazakontë. Ekrani tregon simbole me shumë ngjyra që kryqëzohen. Rezultati i kryqëzimit është një ngjyrë e re. Duket interesante.

frymëzim

• Dribbble - Komuniteti më i madh i stilistëve. Puna, komuniteti, komunikimi - këtu mund të gjeni gjithçka.
• Freebbble - shabllone dhe modele nga Dribbble. Disa gjëra mund të shkarkohen falas, disa mund të blihen. Mund të gjeni shabllone për CMS, stilistë, ikona, modele, modele të dizajnuara të faqeve të internetit dhe shumë më tepër.
• Muzli - Frymëzimi i përditshëm i dizajnit. Një burim për projektuesit me shembuj të veprave më të pazakonta.
• Awwwards - zhvillimet më të mira të stilistëve. Organizuar si një vend votimi në komunitet. Përzgjidhet faqja e ditës, muajit, vitit etj., Një numër i madh dizajnesh, videosh, zhvillimesh.
• Design You Trust është një komunitet dizajnerësh që ndajnë tendencat, lajmet, portofolet, dizajnet dhe njoftimet kreative më të fundit.
• Email me të vërtetë të mirë - Një koleksion i madh emailesh të dizajnuara mirë. Zgjidhni një shabllon dhe merrni kodin e tij html, css dhe js. Mund të ndryshoni tekstin, fotot, etj.
• Fubiz – publikime nga fusha e dizajnit dhe krijimtarisë. Mund të gjeni fotografi, dizajne, grafika, video, etj. Gjithçka është e ndarë në kategori.
• Designspiration është një koleksion i modeleve të stilit Pinterest. Një numër i madh idesh dhe shembujsh - tipografi, logo, letra dhe shumë më tepër.
• Behance është një koleksion portofolesh nga profesionistë. Ju mund të lini një vend të lirë pune ose një rezyme.
• Modelet e celularit – biblioteka e pamjeve nga iOS dhe Android. Gjithçka është e ndarë në seksione. Mund të gjeni shumë ide.
• One Page Love është një galeri e modeleve më të mira të faqeve në internet. Mund të blini shabllone dhe tema. Ka edhe të lira.
• Uispace është një burim për projektuesit. Ju mund të shkarkoni falas psd, skicë, shkronja, modele etj.

Redaktorët grafikë

• DAZ 3D - Modelimi 3D. Regjistrohuni dhe shkarkoni aplikacionin e desktopit.
• Gimp është një analog falas i Photoshop. Ju lejon të personalizoni një rrjet modular, të krijoni udhëzues, të punoni me shtresa, të shtoni efekte, etj. Është një zëvendësim i mirë falas për Photoshop-in. Është e zgjerueshme - mund të shkarkoni shtojca shtesë.
• Blender - modelim 3D, animacion, renderim, zë, video. Ju lejon të krijoni lojëra. Redaktues me rritje të shpejtë, shumë popullor.
• Aviary është një shërbim i redaktimit të fotografive në internet. Shumë opsione, duke përfshirë Efektin e Syve të Kuq, ndryshimin e madhësisë, etj.
• Pixlr është një redaktues fotografish në internet dhe një redaktues grafik i veçantë. Ky i fundit duket si Photoshop. Ruan në disk.
• BeFunky është një shërbim i redaktimit të fotografive në internet. Efektet, kornizat, grafika, retushimi dhe shumë më tepër. Ekziston një ndërfaqe në gjuhën ruse.
• Inkscape është një redaktues i plotë grafikësh me burim të hapur. Mbështet aftësitë e formatit SVG - puna me forma, konturet, teksti, vektorizimi i grafikëve raster, etj. Përveç përpunimit të imazheve vektoriale, ju lejon të krijoni një shabllon uebsajti dhe ta shkurtoni atë - ekziston një rrjet modular. Ju lejon të vizatoni sfonde, banderola, logo vektoriale, etj.
• IconEdit2 është një program shumë i thjeshtë për vizatimin e ikonave. Ka filtra. Ju lejon të eksportoni një imazh për Android dhe Apple. Mund të rregulloni thellësinë e ngjyrës, të rrotulloni dhe rregulloni ikonën. Mbështet tejdukshmërinë, imazhe të shumta për skedar ICO dhe anti-aliasing në të gjitha mjetet e vizatimit.
• Falco GIF Animator është një program për krijimin e animacioneve kornizë për kornizë dhe ikonave të animuara. Ju mund të shkarkoni shumë programe të ndryshme në burim.
• Krita është një redaktues profesional i desktopit me burim të hapur. Në dispozicion për OS të ndryshëm.
• Boxy-SVG është një redaktues grafike vektoriale i ngjashëm me Adobe Illustrator, Sketch dhe Inkscape.
• Photopos është një program shumëfunksional, me funksionet e një redaktuesi fotografish, një redaktues grafik dhe një aplikacion për krijimin e grafikës kompjuterike.
• 5Dfly është një aplikacion falas për përpunimin e fotografive në grup. Mund të krijojë shfaqje rrëshqitëse duke përdorur PowerPoint. Mund ta shkarkoni veçmas konvertuesin PDF.
• PaintStar është një redaktues imazhi falas. Ndërfaqja është shumë e ngjashme me Paint, por ka më shumë opsione. Shtresat, për shembull.
• PhotoScape është një redaktues i thjeshtë fotografish. Ka funksione për rregullimin e ndriçimit dhe ngjyrës, balancën e të bardhës, korrigjimin e dritës së prapme, kornizat, balonat, modalitetin e mozaikut, shtimin e tekstit, vizatimin e imazheve, prerjen, filtrat, heqjen e syve të kuq, ngjyrosjen, furçën, vulën e klonit, furçën e efekteve, etj.

Përshëndetje të gjithëve! Sot, si pjesë e seksionit të dizajnit të uebit, dua të flas për fontet që duhen përdorur gjatë zhvillimit të një faqe interneti.

Si rregull, jo të gjithë mendojnë se cilat shkronja duhet të përdoren për pjesën e përmbajtjes së faqes. Përzgjedhja e shkronjave të bukura për një faqe interneti është pjesa më e rëndësishme e zhvillimit të dizajnit. Meqenëse lexueshmëria e informacionit të faqes varet nga kjo pjesë, dhe kjo, siç e dimë, është gjëja më e rëndësishme në faqe. Për këtë arsye, kjo çështje duhet marrë shumë seriozisht.

Por ju mund të përdorni vetëm fontet në hartimin e faqeve të internetit që janë të disponueshme për vizitorët e ardhshëm të faqes. Kjo bëhet për të siguruar që faqet të shfaqen në mënyrë korrekte për të gjithë përdoruesit, me sisteme operative dhe shfletues të ndryshëm. Përndryshe, nëse përdorni shkronja jo standarde, atëherë shumica e vizitorëve do të shohin gjithçka ndryshe dhe, në shumicën e rasteve, në një mënyrë të shëmtuar. Për këtë arsye, rekomandohet përdorimi i shkronjave standarde të renditura më poshtë. Lista e shkronjave përfshin fontet që janë instaluar në sistemin operativ Windows XP dhe më lart.

Në këtë artikull nuk i konsideroj fontet nga sistemet e tjera operative. Një stilist me përvojë duhet të dijë krahasimin e shkronjave në sisteme të ndryshme operative dhe gjatë paraqitjes ai do ta shkruajë këtë pikë në stilet CSS.

Në thelb, kur zhvillohet pjesa e përmbajtjes së dizajnit, përdoren dy lloje shkronjash:

• fontet serif
• fontet sans serif

Fontet Serif- (anglisht serif - serif) fontet stili i të cilave fillon dhe mbaron me goditje. Për shembull Times New Roman.

Shkronjat sans serif(fontet e copëtuara) - (anglisht sans-serif - sans serif) shkronja me vija strikte, të drejta pa serife. Për shembull Arial.

Më poshtë mund të shihni një pamje të shkronjave serif dhe sans serif.

Fontet për dizajnin e uebit:

• Arial
• Arial Zi
• Arial Narrow
• Libri Antiqua
• Gotik shekullor
• Comic Sans MS
• Korrier i ri
• Franklin Gothic Medium
• Gjeorgjia
• Ndikimi
• Konsola Lucida
• Lucida Sans Unicode
• Microsoft Sans Serif
• Linotipi Palatino
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Uebfaqe (simbole dhe shenja të ndryshme)
• Krahët (simbole dhe shenja të ndryshme)

Do të doja të shënoja gjithashtu një gjë të tillë si mungesa e shkronjave të pjerrëta në një numër shkronjash, në vend të shkronjave të pjerrëta, ata përdorin pjerrësi, gjë që e bën tekstin të vështirë për t'u lexuar.

Nga fontet standarde në Windows që nuk kanë shkronja të pjerrëta:

• Arial Zi
• Comic Sans MS
• Franklin Gothic Medium
• Ndikimi
• Konsola Lucida
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Meqenëse përmenda fontet që nuk kanë shkronja të pjerrëta, do të doja të theksoja edhe faktin se ka fonte që fillimisht janë shkronja të theksuara. Për këto arsye, nuk ka kuptim të përdorim stile që tregojnë shkronja të theksuara, pasi rezultati nuk do të jetë ai që na nevojitet.

Ka një numër të madh mënyrash për të gjetur fontin e duhur për faqen tuaj të internetit. Për shembull, mund të përdorni shërbime me biblioteka të mëdha të shkronjave që kërkojnë një abonim me pagesë.

Nëse jeni me një buxhet ose jeni duke eksperimentuar me një projekt të vogël, mund të përdorni fontet falas në internet që janë të disponueshme publikisht. Gjetja e fontit të duhur të uebit për faqen tuaj të internetit mund të marrë shumë kohë, kështu që ne ju prezantojmë me një përzgjedhje prej më të mirëve midis tyre.

1. Montserrat

Ndërsa tipografia evoluon, ajo largohet nga posterat dhe tabelat urbane të cilësisë së mirë. Krijuesja e këtij fonti u përpoq të ruante bukurinë e tipografisë së posterave urbanë që shihte në rrugët e Buenos Aires.

2. Abril Fatface

Abril Fatface është pjesë e një familjeje të madhe shkronjash që vjen në 18 stile të krijuara për qëllime të ndryshme. Ky font ka një prani të fortë dhe elegante, duke e bërë atë një zgjidhje të shkëlqyer për krijimin e titujve tërheqës. Më shpesh kombinohet me Lato, Open Sans dhe Droid Sans.

3. Ekrani i Playfair

Duke pasur parasysh lartësinë e konsiderueshme x dhe nënshkrimet e vogla të shkronjave, Playfair Display është gjithashtu i përshtatshëm për të shkruar një titull, veçanërisht nëse hapësira është e kufizuar. Ajo çiftëzohet mirë me Gjeorgjinë dhe përdoret shpesh me Oswald, Lato dhe Arvo.

4. GT Walsheim

I përdorur në shumë bloge sot, GT Walsheim është një përfaqësues i serifeve gjeometrike sans dhe është pjesë e familjes Grilli Type. Duhet të paguani për një grup të plotë shkronjash, por Grilli Type ofron një provë falas të GT Walsheim.

5. Merriweather

Nëse lexueshmëria në ekran është një prioritet për projektin tuaj, shikoni Merriweather, i cili u krijua për këtë qëllim. Përveç kësaj, ky font është duke u përmirësuar vazhdimisht.

6. Josephine Sans

Josefin Sans është frymëzuar nga dizajni vintage suedez dhe përmban një estetikë elegante, gjeometrike.

7. Gravitas One

Gravitas One bazohet në "UK yndyrë fytyrë", një font të guximshëm reklamimi që u shfaq gjatë Revolucionit Industrial në Angli. Ky font duket i shkëlqyeshëm në shkallë të mesme dhe të madhe dhe është i përshtatshëm për titujt, titujt dhe skedat.

8. Jura

Shkronjat e këtij fonti përsërisin format e shkronjës Kaya-li. Përmban gjithashtu glife të alfabetit cirilik dhe grek. Është në dispozicion në pesha të lehta, normale, të mesme dhe të theksuara.

9.Liga gotike

Projektuar fillimisht nga Morris Fuller Benton për American Type Founders Company në 1903, League Gothic gjeti një përdorim të ri me një përditësim dhe shtimin e glifeve të reja.

10. fiord

Fjord është një font serif i krijuar fillimisht për libra të printuar dhe është veçanërisht i përshtatshëm për përshtatjen e tekstit të gjatë në një format të vogël printimi. Mund të përdoret për të krijuar një sasi të madhe të përmbajtjes së tekstit në sajt, pasi fonti ka një strukturë të qartë, serife të spikatura dhe koka dhe këmbë të gjata e elegante.

11. Amarant

Familja e shkronjave Amaranth përmban një dizajn italik jo të zhdrejtë me pak kontrast dhe kthesa të dukshme. Të tre stilet Amaranth çiftëzohen mirë me pothuajse çdo font tjetër. Ju mund të luani me këtë font - eksperimentoni dhe zgjidhni më të mirën.

12. Poli

Ky font me kontrast mesatar u krijua fillimisht për gjuhën indigjene Wayuunaiki, e cila kërkon glife të gjera. Ai përmban kërcell të vegjël dhe një lartësi të madhe x, duke e bërë atë veçanërisht të dobishëm në madhësi të vogla.

13. Gentium Basic

Ky font u krijua si një font shumëgjuhësh, duke përfshirë shkronja latine dhe greke, si dhe mbështetje cirilike dhe të avancuar në versionin Gentium Plus. Gentium Basic dhe Gentium Book Basic janë të disponueshme në një version falas në internet, por janë të kufizuara vetëm në alfabetin latin.

14. Open Sans

Open Sans është një përfaqësues i groteskeve humaniste. Ky font është shumë i lexueshëm dhe përshtatet si me ndërfaqet në ueb ashtu edhe me ato celulare. Është një font jo i pjerrët me një stil të thjeshtë shkronjash, i cili karakterizohet nga një pamje neutrale, por mjaft e këndshme që mund të përdoret për qëllime të ndryshme.

15. Libri i rregullt

Është një font shumë-funksional me një lartësi të madhe x, kontrast të fortë ngjyrash dhe serife të mirëpërcaktuara që kontribuojnë në lexueshmërinë e tekstit. Ky font duket i mirë si në printim ashtu edhe në një ekran me rezolucion të ulët.

16. Signika

Ky font falas në internet është përfaqësues i sans serif. Kontrasti i ulët dhe lartësia e lartë x lejojnë që Signika të shfaqet mirë në ekran. Zgjedhja e gjerë e ikonave përfshin simbole, piktograme dhe shigjeta.

17. Josefin Slab

I krijuar sipas kanuneve të një fonti gjeometrik tipik të viteve 1930, me shtimin e veçorive skandinave, Josefin Slab ka karakteristikat e një fonti të pllakës dhe të kujton një font makinë shkrimi. Është interesante se lartësia e tij x është gjysma e lartësisë së një shkronje të madhe.

18. Forumi

Siç sugjeron emri, ky është një font romak që është i mirë për titujt e kyçjes me shkronja kapitale, por gjithashtu i përshtatshëm për shfaqjen e tekstit. Përmasat elegante të këtij fonti të kujtojnë arkitekturën klasike me harqet e tij gjysmërrethore, qoshet horizontale dhe kolonat vertikale.

I emëruar sipas një prej qyteteve më të famshme të Majave, Tikal Sans ka tipare të glifeve që janë përdorur në shkrimin e qytetërimit të Amerikës së Jugut. Krijuesi i tij zgjodhi një lartësi të madhe x, e cila i jep fontit një pamje moderne dhe ka një efekt të dobishëm në lexueshmërinë e tij, dhe përzgjedhja e madhe e stileve e lejon atë të përdoret për qëllime të ndryshme.

20. Arvo

I përshtatshëm si për printim ashtu edhe për ueb, ky font i pllakës gjeometrike është i disponueshëm në romake, italike, romake të theksuara dhe kursive të zeza. Kontrasti i ulët i Arvo rrit lexueshmërinë e tij në ekran.

21. Bevan

Bevan u krijua bazuar në fontin tradicional të pllakave të viteve 1930. Shkronjat u dixhitalizuan, iu dha një formë e re dhe u optimizuan për versionin në internet. Ky është një nga fontet e pakta super të guximshme që janë të përshtatshme për faqet e internetit.

22. TT standard i vjetër

Old Standard TT bazohej në fontin Modern serif, i cili ishte i popullarizuar në fund të shekullit të 19-të dhe në fillim të shekullit të 20-të dhe më pas u harrua për një kohë të gjatë. Ky font është i përshtatshëm për t'i shtuar stil një lloji specifik të përmbajtjes, të tilla si kërkime shkencore ose tekste në greqisht ose cirilik.

23. Kreonti

Ideal për faqet e internetit dhe bloget e lajmeve, ky font serif ndan gjithashtu karakteristikat e një fonti të pllakës, por ekuilibri dhe kontrasti i ulët e bëjnë Kreon dukshëm më personal.

24. Droid Sans

Droid Sans është optimizuar për lexueshmëri maksimale edhe në ndërfaqe të vogla, të tilla si menutë në ekranet e telefonave celularë. Ky është një font neutral, jo i zhdrejtë me shkronja të thjeshta dhe të hapura.

25. Italiana

Krijuesi i këtij fonti është frymëzuar nga kaligrafia klasike italiane, kështu që fonti do të jetë shumë i dobishëm për projektet ku duhet të shtoni elegancë. Italiana është gjithashtu e përshtatshme për të shkruar titujt e lajmeve si në formatin e shkruar ashtu edhe atë elektronik.

26. Vollkorn

Ky font serif i detajuar dhe i pasur me veçori është shumë i popullarizuar. Qartësia dhe qëndrueshmëria e tij përcjellin besim dhe energji, duke e bërë fontin po aq efektiv në madhësi më të mëdha për titujt dhe titujt, si dhe në sasi të mëdha teksti në formate më të vogla.

27. Aktori

Ky font ka një lartësi veçanërisht të madhe x, e cila kërkon mjaft hapësirë. Aktori gjithashtu shfaq një stil të modës së vjetër për disa personazhe, siç janë numrat 6 dhe 9.

Me rrënjë që datojnë në shekullin e 16-të, tipografi humanist Garamond është bërë një ikonë e vërtetë tipografike, duke shërbyer shpesh si bazë për krijimin e shkronjave moderne, duke përfshirë EB Garamond.

31. Ubuntu

Ubuntu Grotesque u krijua për të personalizuar tekstin në ueb si në desktop ashtu edhe në pajisjet mobile. Përdoruesit inkurajohen të eksperimentojnë me këtë font, ta modifikojnë dhe përmirësojnë atë sipas dëshirës.

32. Rosario

Rosario është një sans serif klasik humanist që është i përsosur për stilizimin e paragrafëve të tekstit.

33. Pllakë robotike

Roboto Slab është një nga fontet nga familja Roboto. Versioni i bllokut është veçanërisht tërheqës me format e tij gjeometrike dhe kthesat e hapura. Është po aq i përshtatshëm për ekranet e veglave dhe versionet e printuara të teksteve.

34. Oswald

Fonti është një version i ripunuar i versionit klasik Alternate Gothic sans serif. Oswald u përditësua kohët e fundit për të ardhur në një larmi peshash, një grup karakteresh të zgjeruar dhe krijim më të mirë.

35. Bllokim

Stalemate është një font i shkëlqyeshëm i shkruar me dorë me njëfarë dhunti të cilësisë së mirë. Është i përshtatshëm për të krijuar thekse dhe për të personalizuar faqen tuaj të internetit.

36. Tekst Crimson

Ky font klasik proporcional i dizajnuar me kujdes mund të përdoret si për të shfaqur sasi të mëdha teksti ashtu edhe për të shkruar tituj.