CSS-ში font შემოკლებული თვისება

წინა გაკვეთილზე ჩვენ განვიხილეთ ტექსტისთვის განკუთვნილი მრავალი თვისება. ხშირად საკმაოდ დამღლელია ცალ-ცალკე აღწეროთ თითოეული ეს თვისება, ამიტომ CSS-ში, მეტი მოხერხებულობისთვის, არსებობს სპეციალური შემოკლებული თვისება font. ეს თვისება საშუალებას გაძლევთ ერთდროულად დააყენოთ ფონტის ზომა, ოჯახი, სიმსხნესა, დახრილობა და სტრიქონებს შორის ინტერვალი.

აღწერილ თვისებას აქვს შემდეგი სინტაქსი:

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

ამ შემთხვევაში თვისებების თანმიმდევრობას აქვს მნიშვნელობა, და სავალდებულოა font-size და font-family. გაითვალისწინეთ, რომ სხვა თვისებები, ზემოთ სინტაქსში აღწერილების გარდა, არ შედის ამ შემოკლებულ თვისებაში.

მოდით შევხედოთ მაგალითებს.

მაგალითი

დავუშვათ, გვაქვს შემდეგი სტილები:

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

მოდით გადავწეროთ ისინი შემოკლებული თვისების მეშვეობით:

cssp {
  font: 16px Arial;
}

მაგალითი

დავუშვათ, გვაქვს შემდეგი სტილები:

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

მოდით გადავწეროთ ისინი შემოკლებული თვისების მეშვეობით:

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

მაგალითი

დავუშვათ, გვაქვს შემდეგი სტილები:

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

მოდით გადავწეროთ ისინი შემოკლებული თვისების მეშვეობით:

cssp {
  font: bold 16px Arial;
}

მაგალითი

დავუშვათ, გვაქვს შემდეგი სტილები:

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

მოდით გადავწეროთ ისინი შემოკლებული თვისების მეშვეობით:

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

პრაქტიკული ამოცანები

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

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

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