haber

Uçak bileti

- Avtor: -primož- 09.03.10

Posebne pisave oz. fonti na spletni strani

Prav ste prebrali ... od sedaj naprej lahko na svoji spletni strani uporabljate svoje posebne pisave, ne glede na to, ali imajo obiskovalci ta font nameščen na svojem računalniku ali ne. Kako uporabljati svoje pisave vam bo pokazal ta vodič. Priporočam!

PRIKAZ posebnih pisav

Do sedaj ste morali, če ste hoteli uporabljati svoje fonte, uporabiti slike besed, javascript ali flash. Če ste uporabljali slike in flash vas iskalniki nikakor niso morali poindeksirati. S CSSjem se vse to spremeni. Brez kakršnihkoli komplikacij in nepotrebnega izgubljanja časa lahko sedaj uporabite, brez skrbi, svoje pisave na spletni strani. Spodaj spisana koda deluje v Firefoxu, Chromu in ne boste verjeli, celo v Internet Explorerju. Mogoče se zdi, da sem preveč navdušen nad to kodo, kar resnično sem. Končno! Very Happy

Kakšna je CSS koda?

S pomočjo CSSja uvozite poseben font v stran s kodo:

@font-face {font-family: 'imePisave'; src: url('potDoPisave');}

Če želite uporabiti več različnih pisav:

@font-face {font-family: 'imePisave1'; src: url('potDoPisave1');}

@font-face {font-family: 'imePisave2'; src: url('potDoPisave2');}

@font-face {font-family: 'imePisave3'; src: url('potDoPisave3');}

Od tukaj naprej lahko pisave uporabljate kjerkoli. Pisavo lahko določite za celo stran (body {font-family: 'imePisave';} ), lahko pa jo določite posebnemu razredu, naslovom itd.

Za boljše razumevanje si oglejte primer:

<html>
<head>
<style type="text/css">

@font-face {font-family: 'ValentinaJF';    src: url('ValentinaJF.ttf');}
@font-face {font-family: 'Ruritania';    src: url('Ruritania.ttf');}
@font-face {font-family: 'ChopinScript';    src: url('CHOPS___.TTF');}
@font-face {font-family: 'Morpheus';    src: url('MORPHEUS.TTF');}

p.pisava1 {font: 30px 'ValentinaJF', Arial, sans-serif;}
p.pisava2 {font: 30px 'Ruritania', Arial, sans-serif;}
p.pisava3 {font: 30px 'ChopinScript', Arial, sans-serif;}
p.pisava4 {font: 30px 'Morpheus', Arial, sans-serif;}
</style>
</head>

<body>
<p class="pisava1">Moje-Mesto.com</p>
<p class="pisava2">Moje-Mesto.com</p>
<p class="pisava3">Moje-Mesto.com</p>
<p class="pisava4">Moje-Mesto.com</p>
</body>
</html>

PRIKAZ posebnih fontov

Razlaga kode:

Pisave so vse v isti mapi, kot HTML datoteka. Vsako pisavo smo posebej uvozili, eno po eno. Pri font-family: je določeno ime pisave. Ime pisave lahko izberete vi. Tako ime, kot ga določite tukaj, lahko nato uporabljate naprej v kodi. V src: url('/ ... '); definirate pot do pisave. Pazite na to, da bo pot pravilna (velike/male črke, končnica).

Pisave, ki smo jih uvozili smo nato določili posameznim razredom (.pisava1, .pisava2, .pisava3, .pisava4). Te razrede lahko nato uporabljamo na spletni strani in ves tekst, ki ima določen ta razred bo spisan s posebno pisavo.

*Arial in Sans-Serif sta pisavi, ki sta določeni za vsak slučaj, če obiskovalec nima IE8 ali FireFoxa.

To bi bilo vse za to razlago. Če so kakšne nejasnosti pa le vprašajte.

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

Komentiraj:

Miha	\|24-03-2010 21:03

Tole je pa odlično!

Že pred časom smo hoteli spletno stran dati v pisavo Adobe Garamond, pa smo potem ugotovili, da jo morajo imeti uporabniki nameščeno na računalniku, če želijo spletno stran gledat v tej pisavi.

Potemtakem željeno pisavo samo prenesem na 'server,' določim pot do nje, in stvar že deluje?

-primož-

|24-03-2010 23:35

Naj bi

Moralo bi delovati v IE6, 7, 8 in pa novejših Firefoxih.

Goran

|25-03-2010 16:53

Pozdravljen,
najprej pohvale za super vodič!

Dela mi pa samo v Mozili, v IE8 pa ne.

Kakšna ideja?

Lp,
Goran

-primož-

|27-03-2010 21:43

Hvala za komentar.

Vodič je pomankljiv. Jutri ga bom posodobil in popravil. .ttf fonti delujejo le v FF, za IE pa potrebujete .eot fonte. Bom pojasnil, kako pretvoriti .ttf v .eot.

Lp,
-primož-

erik	\|31-05-2010 12:28

ali pozna kdo slučajno kaj takega za microsoft power point?

LP; erik

-primož-

|31-05-2010 13:25

V Windowse namesti želeno pisavo in jo boš lahko uporabil tudi v Power Pointu.

http://moje-mesto.com/windows-vodici/87-kako-namestiti-nove-pisave

luka	\|26-07-2011 11:36

Mene pa zanima kako te pisave uvozim če delam stran z adobe dreamweaver in imam ločeno html in css datoteko?
Hvala

luka	\|26-07-2011 11:55

IN IMAM ČRKE SHRANJENE V POSEBNI MAPI NA STRANI(MAPA CRKE)

-primož-

|26-07-2011 13:38

Jaz v dreamweaverju le kodo pišem, stran gledam pa direktno v FFju ali IEju. Dreamweaver velikokrat povsem spači stran!

Kar se tiče pisave mislim, da je koda še zdaj pomankljiva a ne vem zakaj se je ne spravim popraviti. Ta koda preverjeno deluje:

@font-face {
font-family: 'Monotype Corsiva';
src: url('MTCORSVA.eot');
src: local('Monotype Corsiva'), local('Monotype Corsiva'), url('MTCORSVA.TTF') format('truetype');
}

primer: http://kacjilog.si

Pot do pisave je določena 2x v url() npr. url('CRKE/pisava.ttf'), potrebuješ pa oba formata in .eot in .ttf, da se bo pisava prikazala v vseh brskalnikih.

kirk	\|02-08-2011 11:18

mene pa zanima v čem je razlika med pisavami s .ttf končnico in .eot končnico?
In kje se da dawnloudat pisave z obema končnicama naenkrat?
Hvala

-primož-

|02-08-2011 21:00

Pozdravljen,

hvala za vprašanje (z njimi dopolnjujete ta vodič

Najbolje, da si o ttf in eot prebereš na wikipediji (ne maram dajati takih "google it" odgovorov a sam še ne vem dovolj o fontih, da bi ti lahko dajal čisto točne odgovore o njih). Lahko ti povem, da je eot ustvaril Microsoft z namenom, da se bo eot fonte dalo uporabljati na spletu (embedded). Prav zaradi IEja mora biti tudi ta font definiran, ker IE, ker je Microsoftov, žal ne upošteva (ne zna ali noče

ttf fontov. ttf font je pa definiran za vse ostale brskalnike.

Prenos fontov z obema končnicama? Hm, nisem še zasledil take strani. Prilagam pa povezavo, kjer lahko pretvoriš ttf v eot (preizkušeno):

http://www.kirsle.net/wizards/ttf2eot.cgi

Iz eot v ttf pa lahko pretvoriš tukaj (nepreizkušeno):
http://onlinefontconverter.com/

Če bodo nejasnosti prosim, kar vprašaj.

Lep pozdrav,
-primož-

Sorodni vodiči
Div v divu in problem z višino - overflow: auto CSS oblaček za besedilo CSS !important Hover meni s slikicami Preprosta CSS sredinska poravnava z a img hover	Izginjajoče besedilo Display: none in Visibility: hidden CSS galerija 650 predelava in nadgradnja Prosojnost slike s CSSjem Posebne pisave oz. fonti na spletni strani

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé, Čokolada

haber

Uçak bileti

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči