CSS-de font gysgaçylyk häsiýeti

Öňki sapakda biz tekst üçin köp häsiýetleri düşündik. Bu häsiýetleriň hersini aýratynlykda ýazmak köplenç kyn bolýar, şonuň üçin has amatly bolmagy üçin CSS-de ýörite gysgaçylyk häsiýeti font bar. Bu häsiýet bir wagtda şriftyň ululygyny, maşgala, ýogynlyk, kursiw we setirler aralygyny belläp bermäge mümkinçilik berýär.

Beýan edilýän häsiýetiň aşakdaky sintaksisi bar:

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

Şeýle-de bolsa, häsiýetleriň tertibi möhümdir, we hökmany bolanlar font-size we font-family. Ýokardaky sintaksisde beýan edilenlerden başga häsiýetler bu gysgaçylyk häsiýetine girmeýändigine üns beriň.

Geliň mysallar bilen göreliň.

Mysal

Bizde aşakdaky stiller bar bolsun:

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

Geliň olary gysgaçylyk häsiýeti arkaly ýazalyň:

p {
	font: 16px Arial;
}

Mysal

Bizde aşakdaky stiller bar bolsun:

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

Geliň olary gysgaçylyk häsiýeti arkaly ýazalyň:

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

Mysal

Bizde aşakdaky stiller bar bolsun:

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

Geliň olary gysgaçylyk häsiýeti arkaly ýazalyň:

p {
	font: bold 16px Arial;
}

Mysal

Bizde aşakdaky stiller bar bolsun:

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

Geliň olary gysgaçylyk häsiýeti arkaly ýazalyň:

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

Amaly tabşyryklar

font gysgaçylyk häsiýetinden peýdalanyp, kody gysgaldyň:

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

font gysgaçylyk häsiýetinden peýdalanyp, kody gysgaldyň:

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

font gysgaçylyk häsiýetinden peýdalanyp, kody gysgaldyň:

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