Vetia-shkurtim font në CSS

Në mësimin e mëparshëm shqyrtuam shumë veti për tekst. Shpesh është mjaft e vështirë të përcaktosh veçmas secilën nga këto veti, prandaj në CSS për lehtësi më të madhe ekziston një veti e veçantë-shkurtim font. Kjo veti lejon të vendosni njëkohësisht madhësinë e shkronjave, familjen, trashësinë, stilin e pjerrët dhe hapësirën ndër-rreshtore.

Vetia e përshkruar ka sintaksën e mëposhtme:

font-style font-weight font-size / line-height font-family

Në këtë rast, rendi i vetive ka rëndësi, dhe ato të detyrueshme janë font-size dhe font-family. Kushtojini vëmendje faktit që veti të tjera, përveç atyre të përshkruara më sipër në sintaksë, nuk përfshihen në këtë veti shkurtimi.

Le të shohim me shembuj.

Shembull

Le të supozojmë se kemi stilet e mëposhtme:

p {
	font-size: 16px;
	font-family: Arial;
}

Le t'i rishkruajmë ato përmes vetisë-shkurtim:

p {
	font: 16px Arial;
}

Shembull

Le të supozojmë se kemi stilet e mëposhtme:

p {
	font-size: 16px;
	font-family: Arial;
	line-height: 50px;
}

Le t'i rishkruajmë ato përmes vetisë-shkurtim:

p {
	font: 16px/50px Arial;
}

Shembull

Le të supozojmë se kemi stilet e mëposhtme:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
}

Le t'i rishkruajmë ato përmes vetisë-shkurtim:

p {
	font: bold 16px Arial;
}

Shembull

Le të supozojmë se kemi stilet e mëposhtme:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
	line-height: 50px;
	font-style: italic;
}

Le t'i rishkruajmë ato përmes vetisë-shkurtim:

p {
	font: bold italic 16px/50px Arial;
}

Detyra praktike

Shkurto kodin, duke përdorur vetinë-shkurtim font:

p {
	font-family: "Times New Roman";
	font-size: 13px;
	line-height: 20px;
}

Shkurto kodin, duke përdorur vetinë-shkurtim font:

p {
	width: 300px;
	font-family: Arial;
	color: red;
	font-size: 40px;
	font-weight: bold;
}

Shkurto kodin, duke përdorur vetinë-shkurtim font:

p {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	text-indent: 50px;
	font-style: italic;
	line-height: 60px;
}