CSS'te font Kısaltma Özelliği

Önceki derste metin için birçok özelliği inceledik. Bu özelliklerin her birini ayrı ayrı yazmak genellikle zahmetli olduğundan, CSS'te daha fazla kolaylık sağlamak için özel bir kısaltma özelliği olan font bulunmaktadır. Bu özellik, aynı anda yazı tipi boyutunu, ailesini, kalınlığını, italik stilini ve satır yüksekliğini ayarlamanıza olanak tanır.

Açıklanan özelliğin sözdizimi aşağıdaki gibidir:

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

Burada özelliklerin sırası önemlidir, ve zorunlu olanlar font-size ve font-family'dir. Yukarıdaki sözdiziminde açıklananlar dışındaki diğer özelliklerin bu kısaltma özelliğine dahil olmadığına dikkat edin.

Şimdi örneklerle inceleyelim.

Örnek

Aşağıdaki stillere sahip olduğumuzu varsayalım:

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

Bunları kısaltma özelliği ile yeniden yazalım:

cssp {
  font: 16px Arial;
}

Örnek

Aşağıdaki stillere sahip olduğumuzu varsayalım:

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

Bunları kısaltma özelliği ile yeniden yazalım:

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

Örnek

Aşağıdaki stillere sahip olduğumuzu varsayalım:

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

Bunları kısaltma özelliği ile yeniden yazalım:

cssp {
  font: bold 16px Arial;
}

Örnek

Aşağıdaki stillere sahip olduğumuzu varsayalım:

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

Bunları kısaltma özelliği ile yeniden yazalım:

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

Pratik Görevler

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