Kako postaviti “bilo koji” font na svoju web stranicu?

  • 1 Odgovora
  • 4474 Pregleda

0 Članovi i 1 gost pregledaju ovu temu.

NiKooLaa

  • Dont fear the reaper!
  • *
  • 5,405
  • +149/-13
  • Pol: Muškarac
    • dzontra.nikola
    • lastfm
    • opusteniforum
    • dzontra_nikola
    • Dzonny
    • Pogledaj profil
    • Valjevski polumaraton
Kako postaviti “bilo koji” font na svoju web stranicu?
« poslato: Jun 08, 2010, 21:15:17 »
Kako postaviti “bilo koji” font na svoju web stranicu?

U čemu je zapravo problem, pa problem je u tome da vi u teoriji možete staviti bilo koji font koji imate instaliran na svom računalu u dizajn vaše stranice. I to će sve super raditi, dok tu stranicu ne pogleda netko tko nema instaliran font koji vi koristite na svom računalu, i onda će se preglednik jednostavno prebaciti na svoj defaultni font, time narušavajući izgled vaše stranice. Tako da je do sad najbolja opcija bila da koristite web safe fontove: Arial, Helvetica, Times New Roman, Verdana, Georgia. Ovo su web safe fontovi samo zato što većina operativnih sustava dolazi sa ovim fontovima već instaliranim.

Da bi doskočili ovom problemu postoji nekoliko metoda, neke koriste JavaScript, neke koriste Flash ali ona koju ćemo mi obraditi u ovom tutorialu koristi @font-face selektor u CSS-u i ne koristi nikakve “teške” tehnologije poput JavaScripta ili Flasha. @font-face postoji već neko vrijeme i razvio ga je Microsoft, ali do nedavno nije bio podržan ni u jednom od popularnih web preglednika. Slijedi tablica trenutno podržanih preglednika:



Formati fontova

Kao što možete vidjeti u tablici gore različiti preglednici podržavaju različite formate fontova. To su OpenType, TrueType, Embedani OpenType i Firefoxov WOFF iliti Web Open Font Format. Pošto se metoda koju ćemo ovdje obrađivati zasniva na tome da fontove koje koristite imate prisutne negdje na svome serveru, morati ćemo paziti da imamo sve verzije fontova prisutne, kako bi se ti fontovi mogli prikazati u većini preglednika. Da bi si olakšali posao koristiti ćemo odličan i besplatan web site: Font Squirrel

Font Squirrel je web sajt koji vam može ponuditi besplatne i neke komercijalne fontove koje možete koristiti na svojim web stranicama. Razlika između Font Squirrela i ostalih sajtova koji vam nude fontove je taj da vam Font Squirrel daje font u svim gore navedenim formatima i još uz to vam daje i CSS kod koji možete koristiti da bi vam se fontovi ispravno prikazivali na stranici.

Postoje 2 načina na koja možete koristiti Font Squirrel, prvi je da jednostavno sa njega skinete font koji vam se sviđa i onda ga primjenite na svoju web stranicu, a drugi je da iskoristite font koji već imate na svom računalu i pomoću Font Squirrela ga pretvorite u sve potrebne formate. Pri ovoj zadnjom metodi Font Squirrel će vam isto dati i CSS kod koji ćete koristiti da prikažete fontove na stranici.

Pošto ste preuzeli font otvorite fajl stylesheet.css i kopirajte sve što se u njoj nalazi u glavnu .css datoteku koju koristite za oblikovanje vaše web stranice. Kod bi trebao izgledati ovako:

@font-face { font-family: 'MatizRegular'; src: url('Matiz.eot'); src: local('Matiz'), local('Matiz'), url('Matiz.woff') format('woff'), url('Matiz.ttf') format('truetype'), url('Matiz.svg#Matiz') format('svg'); }
E sad moja pretpostavka je da vam se glavna .css datoteka nalazi u istoj mapi kao i ostatak datoteka koji čine vašu web stranicu. A pošto smo fontove postavili u mapu fonts (da nam se ne mješaju sa ostalim datotekama) moramo malo prilagoditi gore navedeni kod da nam čita datoteke iz ispravne mape. Taj postupak je vrlo jednostavan, samo moramo dodati fonts/  u svaku url  deklaraciju. Url deklaracija samo pokazuje gdje se nalazi font kojeg ćemo koristiti. Kod bi vam na kraju trebao izgledati ovako:

@font-face { font-family: 'MatizRegular'; src: url('fonts/Matiz.eot'); src: local('Matiz'), local('Matiz'), url('fonts/Matiz.woff') format('woff'), url('fonts/Matiz.ttf') format('truetype'), url('fonts/Matiz.svg#Matiz') format('svg'); }
Jedino što nam sad preostaje je da jednostavno dodamo ovaj font na neke od elemenata na stranici ja ću to napraviti na elementu <  h5 >. Znači sada pišemo CSS kod normalno, a kad hoćemo definirati koji font će neki element koristiti jednostavno dodamo MatizRegular u definiciju fonta. CSS kod bi trebao ovako nekako izgledati:

h5 { font-family: 'MatizRegular', Arial, Helvetica, sans-serif; font-size:18px; color:#333; }
Znači sve je isto kao da dodajte jedan od web safe fontova samo što MatizRegular  stavljate pod apostrofe (‘). Isto tako definirate fallback fontove (Arial, Helvetica, sans-serif), ako korisnikov preglednik iz nekog razloga ne može renderirati @font-face fontove ili ne razumije tu naredbu.

Sada ćemo isprobati dali font radi tako da ćemo u HTML datoteku ubaciti:

<h5>Ovo je proba MatizRegular fonta</h5>
Zaključak

@font-face je odličan alat, koji može uljepšati vašu web stranicu sa lijepom tipografijom. Ali ipak trebate pripaziti, @font-face ne treba koristiti za prikaz normalnog teksta, može ga se tako koristiti ali nije preporučljivo. @font-face se većinom koristi za naslove u tekstu ili kao tipografsku dekoraciju. Isto tako trebate pripaziti na legalnost fonta kojeg koristite, znači nebi trebali koristiti ovu metodu ako nemate odobrenje za korištenje fonta ili ako font niste legalno kupili.

Nadam se da će vam ovaj tutorial pomoći pri izradi vaše sljedeće web stranice. Za sva pitanja koristite sustav komentiranja ispod.

Izvor: xTutorijals.com
::Za webmastere :: Pravilnik foruma ::Baneri :: Magija
samo-opusteno userbar5
>> Registrujte se kako bi videli sadrzaj celog foruma! Neki delovi foruma nisu vidljivi za goste!<<
[Kako da vidim linkove na forumu??]
VAratonac :: ITcyberCOP

[Reklama]


webfabrika1

  • *
  • 5
  • +0/-0
  • Opustite se i uzivajte!
    • Pogledaj profil
Odg: Kako postaviti “bilo koji” font na svoju web stranicu?
« Odgovor #1 poslato: Februar 04, 2021, 10:17:48 »
Dodao bih još jednu sitnicu kod font squirrel jeste da mozete da izbacite prilikom generisanja fontova nepotrebne karaktere i time mozete da smanjite velicinu fajl fonta za skoro 10x što je danas mnogo bitno jer ce u maju 2021 google ozbiljno poceti pratiit brzinu ucitavanja sajta te smanjivanjem fajlova doprinosite da se stranica brze ucita