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