Posebne pisave oz. fonti na spletni strani

CSS posebne pisave

Obravnavali bomo:

  1. Fonti na spletnih straneh včasih in danes.
  2. Kako font pretvoriti, da bo primeren za splet?
  3. Kako font vključiti v spletno stran?
  4. Kako uporabiti poseben font.
  5. Kje dobiti kakšne special fonte?

 


 

1. Fonti na spletnih straneh včasih in danes.

Včasih smo lahko le sanjali o kakšni posebni tipografiji na svoji spletni strani. Uporabljali smo lahko le tiste osnovne pisave: Times New Roman, Arial, Trebuchet MS, Verdana, Tahoma in še nekatere druge. Če smo včasih želeli na spletni strani uporabiti kakšno posebno pisavo ali font smo morali uporabiti javascript v povezavi s flashom, kar vsi vemo, da ne more priti nič dobrega iz tega ven. Druga možnost je bila, da smo vse besede oz. besedilo v spletno stran vstavili, kot sliko. Seveda smo lahko potem rekli ADIJO označevanju besedila in še za SEO to nikakor ni bilo dobro.

V današnjih časih, ko so na voljo različne naprave, različnih dimenzij in resolucij, kaj takega seveda niti pod razno ne moremo več uporabljati. Danes so, hvala razvijalcem, zadeve drugačne. CSS nam sedaj omogoča, da na svoji spletni strani uporabimo tisto pisavo, ki jo želimo.  Kako pa si oglejte v nadaljevanju.

 

 2. Kako font pretvoriti, da bo primeren za splet?

Zaželeli ste si uporabiti posebno pisavo, ki ste jo našli na internetu ali pa jo imate na svojem računalniku. Vendar ne veste kako. Berite naprej.

Najprej morate imeti datoteko te pisave. Če ste si jo prenesli iz interneta verjetno veste, kje jo imate (namizje, prenosi?). Če želite eno, ki je na vašem računalniku, jo morate še najti. Tukaj bom predpostavljal, da uporabljate Windowse. V Windowsih najdete svojo pisavo tako, da kliknete Start > Računalnik. Potem kliknete C > Windows > Fonts. Tukaj notri morate potem najti svojo pisavo. Ime datoteke je navadno podoben, kot ime pisave. Ko najdete datoteko jo kopirajte na namizje. To bo datoteka, ki jo boste pretvorili.

Na spletu je veliko spletnih strani, ki ponujajo pretvorbo pisav (google it: font for web converter), jaz vam priporočam fontsquirrel ali pa kirsle, čeprav zadnje časa uporabljam le FontSquirrel. Pojdite na to spletno stran in kliknite gumb "+add fonts". Izberite vašo datoteko pisave, potrdite in že se bo začela pretvorba. Preden boste lahko prenesli svoje posebne fonte morate obkljukati, da imate dovoljenje za uporabo teh pisav. Verjetno ga nimate, a dokler vas nekdo ne toži ste OK. Obstajajo še zastonjski fonti, a o tem drugič.

Potem kliknete gumb "Download your kit" in začel se vam bo prenos vašega fonta, pripravljenega za splet. Prenesla se vam bo ZIP datoteka, ki jo morate odzipati.

Med datotekami, ki ste jih dobili so datoteke s končnicami: TTF, EOT, SVG, WOFF. Vse te štiri datoteke kopirajte in prilepite poleg datoteke vaše spletne strani (recimo index.html).

 

3. Kako font vključiti v spletno stran?

Font vključite v spletno stran s pomočjo CSS kode:

@font-face {

font-family: 'IME_PISAVE';
src: url('FONT.eot');
src: url('FONT.eot') format('embedded-opentype'),
url('FONT.woff') format('woff'),
url('FONT.ttf') format('truetype'),
url('FONT.svg') format('svg');

}

 

/* Ime pisave ne sme vsebovati presledkov ali posebnih znakov na primer šumnikov (čšž) */

 

RAZLAGA KODE:

 

font-family: 'IME_PISAVE';

S to vrstico določimo ime pisavi. To ime bomo uporabljali v CSS-u.

 

src: url('FONT.eot');
src: url('FONT.eot') format('embedded-opentype'),
url('FONT.woff') format('woff'),
url('FONT.ttf') format('truetype'),
url('FONT.svg') format('svg');

S to kodo v spletno stran vključimo font datoteke, ki ste jih prenesli iz FontSquirrela. Zakaj toliko datotek? Zato, ker različni brskalniki upoštevajo le določen format datotek. Se pravi IE uporablja EOT datoteke, medtem ko firefox in Chrome uporabljata TTF.

 

4. Kako uporabiti poseben font?

Font ste že uvozili s pomočjo posebne CSS kode. Sedaj morate pisavo le še uporabiti. Tukaj vam bom pokazal kodo, ki bo celotni spletni strani določila poseben font.

 

body {

font-family: 'IME_PISAVE';

}

 

RAZLAGA KODE:

body vsebuje vso besedilo spletne strani, ki bo vidno uporabniku. Temu besedilu smo z ukazom font-family določili našo pisavo. Kot vidite smo uporabili tako ime, kot smo ga določili zgoraj, se pravi: IME_PISAVE.

 

5. Kje dobiti kakšne special fonte?

Za iskanje fontov vam priporočam tri strani: dafont, google fonts in fontsquirrel

DaFont, ker imajo res pestro izbiro fontov. Res najdeš kar želiš in vsi fonti so brezplačni za osebno uporabo. Za kaj več pa vam priporočam, da si preberete licence, ki jih najdete poleg font datotek, ko si jih prenesete.

Google Fonts so pisave, ki preverjeno lepo izpadejo na ekranu in so namenjene prav uporabi na spletu. V spletno stran se jih uvozi čisto enostavno, a ta postopek bo opisal kakšen drug vodič.

Fontsquirrel pa isto, kot dafont ... še ena stran z veliko zastonjskimi pisavami.

 


 

POZOR: Posebne pisave/fonte uporabljajte z okusom. Nihče noče gledati skropucalo, ki mu le vi lahko rečete besedilo. Z okusom!!!

Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.