Veturia font-size

Veturia font-size përcakton madhësinë e shkronjave të tekstit. Vlera e veturisë janë çdo njësi për madhësi (zakonisht, këto janë px, em ose rem) ose fjalë kyçe të veçanta (përdoren shumë rrallë).

Sintaksa

përzgjedhësi {
	font-size: vlera;
}

Vlerat në formë fjalësh kyçe

Vlera	Përshkrimi
`xx-small`	Më e vogla absolutisht. Shembull: Lorem ipsum dolor sit amet.
`x-small`	Shumë e vogël. Shembull: Lorem ipsum dolor sit amet.
`small`	E vogël. Shembull: Lorem ipsum dolor sit amet.
`medium`	E mesme. Shembull: Lorem ipsum dolor sit amet.
`large`	E madhe. Shembull: Lorem ipsum dolor sit amet.
`x-large`	Shumë e madhe. Shembull: Lorem ipsum dolor sit amet.
`xx-large`	Më e madhja. Shembull: Lorem ipsum dolor sit amet.
`larger`	Më e madhe se shkronjat e prindit me një vlerë të caktuar.
`smaller`	Më e vogël se shkronjat e prindit me një vlerë të caktuar.

Vlera e paracaktuar: medium.

Shembull

Le t'i caktojmë paragrafëve madhësinë e shkronjave në 20px:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

Shembull

Në këtë shembull, paragrafit i është caktuar madhësia në 16px, kurse span brenda tij - 150%. Në këtë rast, madhësia e shkronjave për span do të jetë 150% e prindit të tij, domethënë e paragrafit, dhe madhësia e tij reale do të jetë 16px * 150% = 24px:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

Shembull

Në këtë shembull, paragrafit i është caktuar madhësia në 16px, kurse për span brenda tij - larger. Në këtë rast, madhësia e shkronjave për span do të jetë më e madhe se ajo e prindit të tij (paragrafit):

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

Shembull

Kushtojini vëmendje faktit që shkronjat me font-family të ndryshëm dhe font-size të njejtë visualisht mund të jenë krejtësisht të madhësive të ndryshme (për zgjidhjen e këtij problemi shikoni veturinë font-size-adjust).

Në shembullin e mëposhtëm, të dy paragrafëve u është caktuar font-size në 16px, por font-family të ndryshme:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}