Хосияти ихтисори font дар CSS

Дар дарси гузашта мо бисёр хосиятҳо барои матнро таҳлил кардем. Аксар вақт ҳар як ин хосиятҳоро алоҳида навиштан кофӣ мушкил аст, пас дар CSS барои осонии бештар хосияти ихтисори махсус font вуҷуд дорад. Ин хосият имкон медиҳад, ки ҳамзанд андозаи шрифт, оила, вазнинӣ, курсив ва фосилаи байнихатҳоро муайян кунед.

Хосияти зикршуда синтаксиси зеринро дорад:

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

Дар ин ҳол тартиби хосиятҳо аҳамият дорад, ва ҳатмии font-size ва font-family мебошанд. Диққат кунед, ки хосиятҳои дигар, ғайр аз дар синтаксиси боло зикршуда, ба ин хосияти ихтисор дохил намешаванд.

Биёед дар мисолҳо намоиш диҳем.

Мисол

Фарз мекунем, ки мо стилҳои зеринро дорем:

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

Биёед онҳоро тавассути хосияти ихтисор нависем:

p {
	font: 16px Arial;
}

Мисол

Фарз мекунем, ки мо стилҳои зеринро дорем:

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

Биёед онҳоро тавассути хосияти ихтисор нависем:

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

Мисол

Фарз мекунем, ки мо стилҳои зеринро дорем:

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

Биёед онҳоро тавассути хосияти ихтисор нависем:

p {
	font: bold 16px Arial;
}

Мисол

Фарз мекунем, ки мо стилҳои зеринро дорем:

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

Биёед онҳоро тавассути хосияти ихтисор нависем:

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

Вазифаҳои амалӣ

Кодро бо истифода аз хосияти ихтисори font ихтисор кунед:

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

Кодро бо истифода аз хосияти ихтисори font ихтисор кунед:

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

Кодро бо истифода аз хосияти ихтисори font ихтисор кунед:

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