CSSтегинде font кыскартуу касиети

Акыркы сабакта биз текст үчүн көптөгөн касиеттерди карап чыктык. Көп учурда бул касиеттердин ар бирин өзүнчө көрсөтүп жазган абдан ыңгайсыз, ошондуктан 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;
}