abc HTML5 TUTORIAL - Veličina fonta /FONT SIZE/ style="font-size:veličina;"

abc HTML5 i CSS TUTORIAL - Linijski CSS /INLINE CSS/

Veličina fonta /FONT SIZE/ style="font-size:veličina;"

Slika 1. Izbor vrijednosti atributa - Linijski CSS /INLINE CSS/

Veličina fonta /FONT SIZE/ Sintaksa: <TAG style="font-size:Veličina_fonta;">

Oznake:
TAG - p | h1 | h2 | h3 | h4 | h5 | h6 | BODY | DIV | SPAN - TAG može da primi jednu od navedenih vrijednosti
p paragraf /PARAGRAPH/
h1 | h2 | h3 | h4 | h5 | h6 - zaglavlje teksta /HEADINGS/
BODY - Tekst u cijelom dokumentu
DIV - Tekst u cijeloj DIV sekciji
SPAN - Tekst u cijeloj SPAN sekciji

font-size - Atribut za veličinu fonta
Veličina_fonta - Brojna vrijednost fonta i mjerna jedinica veličine fonta (em, px, pt, %).

FONT SIZE tag je zastario i u HTML 5 verziji se za izbor parametera fonta koristi CSS.

Slika 2. Veličine fonta /font-size/

Veličina fonta je jedan od najkonfuznijih CSS stilova, jer pri kreiranju fonta mogu se koristi 4 mjerne jedinice sa kojima možete mjeriti veličinu teksta koji će biti prikazan u Web čitaču /BROWSER/. Prikazaćemo sva četitir bez rasprave o međusobnim različitostima.

R.br.	Mjerna jedinica	Oznaka	Opis	Način pisanja
1.	Ems	em	Em je promjenljive veličine (skalabilan) i koristi se u Web medijima. Em je jednak trenutnoj veličini fonta. 1 em = 12 pt (odnosno 2 em = 24 pt, odnosno 0.5 em = 6 pt). Em je popularan kod Web dokumenta i skalabilan je kod mobilnih uređaja.
2.	Pixels	px	Piksel se koristi kao mjerna jedinica na ekranu računara. Jedan pikesel je jedna tačka (DOT), najmanja jedinica rezolucije ekrana.
3.	Points	pt	Pointi se tradicionalno koriste kod printaih medija (odštampano na računaru). Jedan point je 1/72 dio inča (1 inč = 1 " = 2,54 cm). Point je fiksne veličine i mijenja veličinu.
4.	Percent	%	Procenat je sličan jedinici em.12 pt = 100%. Procenti su potpuno skalbilni kod mobilnih uređaj

Odnos mjernih jedinica:
1em = 12pt = 16px = 100%.

Veličina fonta /FONT SIZE/	1em = 12pt	1em = 16px	1em = 100%	1em = 100%
Slika 3. Veličine fonta /font-size/	1 em	1 em = 1 * 12pt = 12 pt	1 em = 1 * 16px= 16 px	1 em = 1 * 100 % = 100%
	1.2 em	1.2 em = 1.2 * 12pt = 14.4 pt	1.2 em = 1.2 * 16px= px = 19.2 pt	1.2 em = 1.2 * 100 % = 120%
	1.5 em	1.5 em = 1.5 * 12pt = 18 pt	1.5 em = 1.5 * 16px= 24 px	1.5 em = 1.5 * 100 % = 150%
	1.8 em	1.8 em = 1.8 * 12pt = 21.6 pt	1.8 em = 1.8 * 16px= 28.8 px	1.8 em = 1.8 * 100 % = 180%
	2 em	2 em = 2 * 12pt = 24pt	2 em = 2 * 16px= 32px	2 em = 2 * 100 % = 200%

Primjeri korištenja veličine fonta.

Mjesto upotrebe	Način deklarisanja	Link
Cijeli dokument	body { font-size: "veličina"; } ili <body style="font-size:veličina;" >	BODY
Paragraf /PARAGRAPH/ <p>	<p style="font-size:veličina;" >Ljepota nije čudo, ali čini čudesa.</p>	PARAGRAPH
Zaglavlje teksta /HEADINGS// <h1,h2,...,h6>	<h1 style="font-size:veličina;" >Ljepota nije čudo, ali čini čudesa.</h1>	HEADINGS
Odnos veličina fonta definisanih u <body> i <p> tagovima.	<body style="font-size:veličina;" > & <p style="font-size:veličina;" >	BODY i PARAGRAPH

Primjeri fonta: Kad se koriste veličina fonta u BODY tagu i Paragraf tagu, za prikaz u BROWSER-u se koristi proizvod ove dvije veličine fonta. kod jedinica procenat (%) i em. Kod mjernih jedinica px i pt se prikazuju navedena vrijednost u paragraf tagu.

	<body style="font-size:100%;" >	<body style="font-size:120%;" >
font-size:1em	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.
font-size:12 pt	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.
font-size:16px	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.
font-size:100%	The quick brown fox jumps over the lazy dog.	The quick brown fox jumps over the lazy dog.

Primjer 1. Iste veličine fonta definisane različitim mjernim jedinicama.

Opis koda

HTML5 kod

Ekran

Veličina fonta u dokumentu je definisa u BODY tagu i u ovom primjeru izvnosi 1.5rm.

Sve veličiine sa mjernom jedinicom px i pt u tagu se prikazuju u navedenoj vrijednosti.

Procenti i em vrijednosti veličina fonta se množe i dobijena vrijednost proizvoda je veličina fonta.
1.5em x 100% = 1.5 em = 150% = 18pt = 24px
1.5em x 150% = 2.25 em = 27pt = 36px

<!DOCTYPE html>
<html>
<head> <title>Veličina fonta</title> </head>
<body style="font-size=1.5em;">
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
</body> </html>

Primjer 2. Različite veličine fonta definisane istom mjernim jedinicom.

Opis koda

HTML5 kod

Ekran

Vrijednosti
1 em = 100% = 12pt = 16px
1.5 em = 150% = 18pt = 24px
2em = 200% = 24pt = 32px

<!DOCTYPE html>
<html>
<head>
<title>Izgled fonta </title>
</head>
<body>
znanje.org 1em
znanje.org 1.2em
znanje.org 1.5em
znanje.org 1.8em
znanje.org 2em
</body>
</html>

znanje.org 1em

znanje.org 1.2em

znanje.org 1.5em

znanje.org 1.8em

znanje.org 2em

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Primjeri korištenja veličina fonta /FONT SIZE/ style="font-size /RELATED LINKS/:

Index