CSS3 @font-face: Upotreba bilo kog fonta na web sajtu
Upotreba fontova pre pojave CSS3
Pri izradi web sajta, jedna od prvih odluka koju donosimo je odluka koje ćemo fontove koristiti za tekstove, naslove, podnaslove, menije, linkove i tako dalje. Ima puno svojstava koji se mogu definisati za font, ali ovde ćemo se zadržati samo na vrsti fonta.
Sigurno znate da se različiti fontovi ne razlikuju samo po izgledu, već se razlikuju po veličini, prostoru koji zauzimaju, neki fontovi su isključivo velika slova ili samo mala slova, neki fontovi ne podržavaju naša slova sa kvačicama i tako dalje. Naš cilj je da svi posetioci web sajta napisane tekstove vide isto.
Do pojave CSS3, browser korisnika mogao je da koristi isključivo fontove koje korisnik ima instalirane na svom računaru, bez obzira koji mi font definišemo. Zato se pribegavalo definiciji fontova koje najverovatnije imaju svi korisnici. Za svaki slučaj, definisalo se i više srodnih fontova. Kôd za definisanje fontova izgleda ovako:
Sintaksa:
body {
font-family:Arial, Helvetica, sans-serif;
}
U ovom primeru definisana je vrsta fonta za element <body>, odnosno za ceo web sajt. Sada browser korisnika na njegovom računaru traži instaliran prvi font koji smo naveli, a to je Arial. Ako ga ne pronađe, traži sledeći i tako do poslednjeg. Ukoliko ne pronađe nijedan, prikazaće korisniku font koji definisan u samom browseru. Kako bi izbegli probleme koji mogu nastati u slučaju da korisnikov računar nema instaliran font koji mi želimo, web dizajneri su se odlučivali da upotrebljavaju samo fontove koji su se dobijali zajedno sa instalacijom Windowsa.
S obzirom da na internetu postoji nebrojeno mnogo fontova, ovo ograničenje je postalo značajan problem.
@font-face definicija vrste fonta u CSS3
Pojavom CSS3 postalo je moguće koristiti bilo koji font, bez obzira na to da li posetilac web sajta ima taj font instaliran na svom računaru. U CSS3 je potrebno "reći" browseru gde se nalazi font koji želimo upotrebiti i naložiti mu gde i kako da ga upotrebi. Ovo možemo uraditi na dva načina.
Prvi je da "skinemo" font koji želimo sa interneta, smestimo među fajlove web sajta i definišemo njegovu upotrebu, dok je drugi način da koristimo fontove koje je Google već pripremio.
Korišćenje @font-face definicija sa vlastitog sajta
Mnogi web sajtovi nude besplatan download velikog broja fontova, a takođe nude i preuzimanje CSS-a za korišćenje fontova. Uzmimo na primer da želimo da upotrebimo font koji se zove HARD ROCK.
- Pronaćićemo ovaj font na www.fonts2u.com sajtu. Ovaj web sajt nudi kompletan kôd za korišćenje @font-face definicija. Uradimo download klikom na link gde piše baš "@font-face" i pošto je u .zip formatu, potrebno je da ga raspakujemo. Raspakovano dobijamo folder HARD_ROCK.
- Za naš web sajt napravimo folder koji nazovemo, recimo: font. U njega prebacimo sledeće fajlove iz gore pomenutog foldera HARD_ROCK:
- stylesheet.css
- HARD_ROCK.eot
- HARD_ROCK.svg
- HARD_ROCK.woff
-
<link rel="stylesheet" type="text/css" href="font/stylesheet.css" />
U head naše stranice (između <head> i </head>) ubacimo kôd za povezivanje sa CSS-om stylesheet.css. Moramo voditi računa o putanji do CSS fajla.
- Poslednji korak je da definišemo upotrebu ovog fonta. Recimo da to želimo da bude neki pasus (<p>). U naš glavni CSS ubacimo sledeći kôd:
Sintaksa:
p {
font-family:"HARD ROCK";
}
@font-face {
font-family:"HARD ROCK";
src:url("HARD_ROCK.eot?") format("eot"),
url("HARD_ROCK.woff") format("woff"),
url("HARD_ROCK.ttf") format("truetype"),
url("HARD_ROCK.svg#HARDROCK") format("svg");
}
U ovom konkretnom slučaju dobili smo na gotov font sa svim ekstenzijama i gotovim CSS-om. Najčešća ekstenzija fontova je .ttf (TTF je skraćenica od True Tipe File, odnosno naziv standardnog formata za fontove). Najčešće ćemo na imternetu pronaći fontove sa samo ovom ekstenzijom. Međutim, starije verzije nekih browsera ne podržavaju ovu ekstenziju. Tako na primer IE9 i stariji podržavaju ekstenziju .eot. Zato u CSS-u gde smo definisali @font-face moramo povezati sve ekstenzije fontova koje smo preuzeli.
U desnom bloku (gde je @font-face) prikazan je sadržaj fajla styleshit.css. Naravno da ne moramo ovo imati u posebnom CSS fajlu. Možemo ovih nekoliko redova kôda ubaciti i u naš glavni CSS. Time postaje višak pozivanje CSS-a navedenog gore (<link rel=...) , jer se podrazumeva da smo naš glavni CSS već povezali sa stranicama web sajta.
Pogledajte i ekspeimentišite malo sa kodovima u donja dva editora koji su dati kao primer. Oba editora imaju identične definicije fonta, s tom razlikom što u gornjem editoru nismo definisali gde će browser da nađe font "HARD ROCK". Pošto ga browser nije pronašao na računaru, koristi i prikazuje tekst u sledeće definisanom fontu, a to je u konkretnom slučaju Arial.
U donjem editoru smo "pokazali" browseru gde je ovaj font i on ga prikazuje baš onako kako treba. Ovo je sve sa pretpostavkom da Vi na svom računaru nemate instaliran ovaj font. Ako ga neki zagriženi roker ipak ima instaliranog, on će u oba editora imati isti rezultat prikaza.
CSS i HTML Rezultat
CSS i HTML Rezultat
Korišćenje @font-face definicija Google-a
Drugi način korišćenja @font-face definicija sa Google-a je nešto jednostavniji jer je Google sve već pripremio. Prednost ovog drugog načina je u jednostavnijem korišćenju, a nedostatak je (neznatno) sporije učitavaje i svakako manji broj fontova koje je Google unapred pripremio.
Ukoliko se odlučimo za ovaj način korišćenja @font-face definicija postupićemo na sledeći način:
- Idemo na Googleo sajt namenjen za ovu upotrebu fontova: www.google.com/fonts i pronađemo font koji želimo da koristimo. Meni se na prvom mestu pojavio font sa imenom Devonshire., pa ćemo njega uzeti za primer.
- Kliknemo na dugme Quick-use
u donjem desnom uglu. - Na novoj stranici koja se otvorila imamo Google-ova objašnjenja kako da koristimo ovaj font u 4 koraka. Prva dva su podešavanja nekih parametara, a treći je kôd koji treba kopirati na naš wev sajt. Koristimo standardni način i sledeći kôd: <link href='https://fonts.googleapis.com/css?family=Devonshire' rel='stylesheet' type='text/css'> iskopiramo u head našeg sajta.
- Još je samo ostalo da definišemo upotrebu ovog fonta. CSS za to nam je Google dao u četvrtom koraku: font-family: 'Devonshire', cursive;
CSS i HTML Rezultat
Komentari
Trenutno nema komentara.Dodajte komentar