• Përshëndetje Vizitor!

    Nëse ju shfaqet ky mesazh do të thotë se ju nuk jeni regjistruar akoma. Edhe pse nuk jeni regjistruar ju arrini të shihni pjesën me të madhe të seksioneve dhe diskutimeve të forumit, por akoma nuk gëzoni të drejten për të marrë pjesë në to dhe në avantazhet e të qënurit anëtar i këtij komuniteti. Ju lutem : REGJISTROHUNI që të dërgoni postime dhe mesazhe në Forum-Al.

    Regjistrohu !

Tipografi me Google Font

Forum-Al

Aty ku shqiptarët mblidhen
Anëtar
Jan 5, 2010
Postime
561
Pikët
28
Vendndodhja
Forum
Fonte standarte të webit si Arial, Georgia apo Trebuchet janë vërtetë cilësorë dhe jam i sigurt që me këtë fakt biem dakort të gjithë. Por nuk mendoni se ka ardhur koha të tregojmë pak më tepër kreativitetin tonë në faqet që ndërtojmë? Unë them se po. Ndërsa jam relativisht i kënaqur me mundësitë që webi i ofron zhvilluesve, pjesa e përdorimit të fonteve të ndryshme lë pak për të dëshiruar. Ndihem i kufizuar në tipet e fontit dhe në alternativat e mira për t’i bërë titujt të “ndriçojnë” me ndonjë font interesant. Thashë alternativa të mira, sepse zgjidhje me sIFR (zëvendësim i fonteve me Flash), typeface.js (zëvendësim i fonteve me Javascript) apo ndonjë shërbim me para për të bërë embed fontet thjeshtë nuk më duken praktike. Nuk dua që në faqet e mia të përdor kode të çuditshme me shumë mundësi bug-esh, të cilat nuk jam i sigurt a do suportohen më pas disa muajsh. Por si ç’do lexojmë më poshtë, ndryshimet po bëhen sa më radikale me kalimin e kohës, e sidomos me futjen në lojë të një lojtari si Google.

Specifikimet e CSS3 parashikojnë përdorimin e një direktive të quajtur @font-face, e cila lejon përdorimin e fonteve të cilat nuk gjenden në kompjuterin e vizitorit. Për çudi, kjo mënyrë ka egzistuar që në krijimin e specifikave të CSS2, por suporti nga shfletuesit ka qenë mediokër në rastin më të mirë, ku psh: Internet Explorer ka suportuar vetëm përdorimin EOT (Embedded OpenType), një format të cilin e zotëron dhe krijohet vetëm përmes një “vegle” të ofruar nga Microsoft. Lajmi i mirë është se tashmë shfletuesit modernë e suportojnë plotësisht (përveç IE që vazhdon me EOT) dhe lejojnë përdorimin e TrueType/OpenType TT (ttf), OpenType PS (otf) dhe SVG (në disa shfletues). Vizitorët me një shfletues modern mund të gëzojnë faqet që përdorin @font-face në të gjithe lavdinë e tyre! Problemi i vetëm është tek vizitorët që nuk përdorin një shfletues modern. Pikërisht këtu vjen në ndihmë Google Font.

Ju dhashë pak histori më sipër për t’ju lënë të kuptoni se në web po merren hapa vërtetë të rëndësishëm për ta përmirësuar atë në çdo aspekt dhe tipografia është diçka e rëndësishme. Sidoqoftë, po flisnim për Google Font. Ky shërbim i Google u lëshua në 19 Maj 2010 dhe është akoma beta (e duke njohur Google, duhet të rri për disa kohë e tillë). Qëllimi i tij është të ofrojë një librari fontesh open source, të lira për tu përdorur nga kushdo, të thjeshta për tu vendosur në faqe dhe moskokëçarje për problemet që mund të lindin me shfletuesit e vjetër. Google, si një kompani me njerëz të mirë (ti lavdërojmë pak se e meritojnë), na ofron një librari fontesh të cilat janë kompatibël edhe me shfletues antik si IE6. Për mua, kjo është gjithçka që kërkoj dhe entuziazmi më ka përfshirë paksa; të jem i sinqertë. E vetmja anë negative është se në momentin që po flasim, Google Font ka një librari të vogël me vetëm 18 fonte. Jam i sigurt që libraria do zgjerohet pa masë me kalimin e kohës e ndoshta edhe me kontributin e artistëve të tipografisë. Ju kujtoj që shërbimi është online prej vetëm 12 ditësh.

Përdorimi është super i thjeshtë; biles më duhet të them që më thjeshtë se kaq s’ka ku të shkojë. Aq i thjeshtë sa mund të përdoret edhe nga njerëz që s’janë marrë asnjëherë me web (edhe pse s’do kishte sens, se fundja për çfarë ju duhen). Fillimisht shkoni në Google Font Directory dhe admironi librarinë e fonteve që ju ofrohen. Duhet t’ju shfaqet një faqe si më poshtë:

Google Font Directory


Nëse klikoni mbi një font, do ju shfaqen disa opione për të parë fontin, variantet, karakteret dhe kodi për ta përfshirë në faqe. Për shembull, unë zgjodha “Droid Serif” dhe kodi që Google Font më dha është si më poshtë:

Ky është kodi standart të cilin duhet ta vendosni në të dokumentit tuaj HTML, por është gjithashtu edhe rasti më i thjeshtë. Do ju tregoj disa shembuj më të komplikuar (që janë shumë të thjeshtë sërish), por përpara të shkruajmë edhe kodin CSS që e përdor fontin në faqe. Kodi më poshtë duhet të jetë i njohur për këdo që ka pak eksperiencë në CSS.

h1{ font:bold 21px 'Droid Serif', Times, serif; } p{ font:15px 'Droid Serif', Times, serif; } Me rregullat e mësipërme kam përcaktuar që header1 (h1) të jetë 21px dhe të përdorë fontin Droid Sans. Ndërsa paragrafet përdorin sërish të njëjtin font, por me madhësi 15px. Ju thashë që është e thjeshtë?! Kemi vetëm një rresht që thërret fontin nga Google Font dhe më pas kodi CSS është standart, ku përcaktojmë familjen e fontit duke shkruar emrin e fontit midis thonjëzave.

Tani po ju tregoj disa mënyra pak më komplekse për thërritjen e fonteve nga Google Font, të cilat thjeshtë ju lejojnë të kurseni resurse apo ti bëni gjërat më lehtë. Nëse jeni të kënaqur me ato që ju tregova deri tani, mos e merrni mundimin të lexoni fare më poshtë.

Formati i kodit të thërritjes është standart (sikur thërrasim një stylesheet të jashtme) dhe nuk ndryshon. Ato që ndryshojnë janë parametrat që vendosim në url, specifikisht në variablen ‘family’. Gjëja e parë që do ju tregoj është thërritja e 2 (ose më shumë nëse doni) fonteve në të njëjtën kohë, pa pasur nevojë të shkruani 2 rreshta. Kjo arrihet duke i ndarë fontent me karakterin “|” (vertical pipe). Në kodin më poshtë do thërras fontin “Droid Serif” dhe atë “Crimson Text”.

Ju duket e thjeshtë? E tillë është! Absolutisht asgjë nuk është e komplikuar. Mund të përcaktojmë gjithashtu disa parametra të tjerë opsionalë që do ju lejojnë të thërrisni vetëm një variant të fontit, në rastin se doni të përdorni vetëm atë. Le të themi se duam të bëjmë një faqe ku do të përdorim fontin “Cantarrel” në variantin e tij Bold, por nuk do ta përdorim askund tjetër në një variant normal apo italic. Për të kursyer paksa resurset, shmangim thërritjen e të gjithë familjes së fontit “Cantarrel” dhe thërrasim vetëm variantet e tij sipas nevojës.

Thërrasim vetëm variantin Bold

Thërrasim vetëm variantin Italic

Thërrasim vetëm variantin Bold-Italic

Mos harroni që këto parametra mund t’i kombinoni edhe me “|” për të thërritur disa fonte në variante të ndryshme.

Mundësitë janë të mira dhe tashmë përfshirja e fonteve në faqe është më e lehtë se kurrë me Google Font. Vetëm të shpresojmë që libraria e saj të zgjerohet dhe atëherë do jetë vërtetë fantastike. Google kur i bën gjërat, i bën të mëdha dhe jam i sigurt që kjo do vlejë edhe për Google Font. Oh, mos harroni që ju ofrohet edhe nje API për Javascript ku mund të bëni gjëra edhe më të çmendura, por do ju duhet ti eksploroni vetë.

Mësim të mbarë.

Tipografi me Google Font është një postim nga: Feniksi.Com - Thesari i Njohurive



Forum-Al.com
Aty ku shqiptarët mblidhen!
 
Top