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;
}