CSS Osnove

Font iz eksterne biblioteke

Drugi nivo kontrole podrazumeva da se pri ispisu teksta ne oslanjate na ugradjene fontove koji postoje na lokalnom računaru, već da to uradite povezivanjem sa nekom eksternom bibliotekom fontova (na primer, Google fonts) i odatle povučete font, a onda za font-family koji ćete primeniti, definišete zvanično ime fonta, tj. ono koje vam Google font biblioteka definiše.

Kako teče taj proces?

Odete na Google fonts https://www.google.com/fonts, izaberete font koji vam se dopada i u dnu izabranog fonta kliknete na ikonicu quick-use (označena crvenim krugom).

CSS-struktura-9

Dalje čekirate dostupne stilove koje želite da budu pozivani kada se strana učitava.

CSS-struktura-10

U nastavku skrolujete na dole i pod tačkom 2. izaberete koji vam set karaktera odgovara. U slučaju da želite ispravno prikazana naša slova, izaberite latin extended.

CSS-struktura-11

Sledeće što vidite na slici su tačke 3. i 4.

Tačka 3. predstavlja liniju koda koju morate da ubacite u vašu head sekciju html dokumenta kako bi povezivanje bilo uspešno a tačka 4 definiše kako treba da izgleda sintaksa font-family atributa.

Time je ovaj proces završen.

Pored Google biblioteke, postoji nekoliko drugih a fontovi tih biblioteka se uglavnom plaćaju.

Font generator

Treći način definisanja fonta, najmanje preporučljiv, podrazumeva korišćenje font generatora. Ako vas interesuje, jedno od mesta gde se možete informisati o proceduri je http://www.cufonfonts.com/

Ovaj način je najzahtevniji i usporava proces učitavanja strane jer učitava i generisan fajl za izabrani font koji bukvalno iscrtava slova u okviru web stranice kako bi ih prikazao u fontu koji ste izabrali.

line-height

Kada u okviru paragrafa teksta niste zadovoljni proredom izmedju redova, koristićete ovaj parametar. line-height je, po defaultu, jednak ili malo veći od vrednosti definisanoj kod font-size atributa. Ukoliko font-size definišete kao vrednost izraženu u pikselima, to možete učiniti i sa line-height atributom.

Pogledajmo primer u kome je ostavljena default vrednost, drugi kada je smanjen, i poslednji kada je line-height povećan u odnosu na podrazumevanu vrednost.

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<title>Line height</title>

<style>

#mali {line-height:50%;}

#normalan {line-height:100%;}

#veliki {line-height:200%;}

</style>

</head>

<body>

<h1>Duplo manji od podrazumevanog </h1>

<p id=”mali”>Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије.</p>

<h1>Podrazumevani </h1>

<p id=”podrazumevani”>Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије.</p>

<h1>Duplo veci od podrazumevanog </h1>

<p id=”veliki”>Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије.</p>

</body>

</html>

U prozoru pretraživača to izgleda ovako:

CSS-struktura-12

Jedinica za line-height može biti u px, mada je često data i u procentima ali i kao neimenovana vrednost. Na primer, line-height:1; znači da je vrednost podrazumevana u odnosu na veličinu fonta dok line-height:2; znači da je vrednost duplo veća od podrazumevane.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn