Font – خلاصه نویسی دستورات CSS

CSS Shorthand چیست ؟

CSS Shorthand یک مجموعه از تکنیک و دستورات است که به منظور خلاصه نویسی دستورات CSS مورد استفاده قرا میگیرد .

خلاصه نویسی دستورات CSS میتواند به ما کمک کند تا :

• کنترل بیشتری بر روی اجزاء یک صفحه وب سایت داشته باشیم
• یک فایل CSS تمیز و قابل خواندن داشته باشیم
• حجم فایل CSS وب سایت کاهش یابد

این مطالب به صورت یک مجموعه ارائه خواهد شد و در مطالب بعدی با خلاصه نویسی دستورات برای خصوصیات دیگر ( Background , Border , Margin and Padding , Outline , List-style ) آشنا خواهیم شد .

خلاصه نویسی دستورات CSS – Font

---

font properties – خصوصیات فونت

element { 

  font-style: normal || italic || oblique;

  font-variant:normal || small-caps;

  font-weight: normal || bold || bolder || || lighter || (100-900);

  font-size: (number+unit) || (xx-small - xx-large);

  line-height: normal || (number+unit);

  font-family:name,"more names";

}

default font property values – مقادیر پیش فرض برای خصوصیات فونت

element {

  font-style: normal;

  font-variant:normal;

  font-weight: normal;

  font-size: inherit;

  line-height: normal;

  font-family:inherit;

}

the font shorthand property – خصوصیات فونت به صورت خلاصه نویسی شده

element {

   font: font-style font-variant font-weight font-size/line-height font-family;
   
}

example – مثال

element {

   font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
   
}

نکته

توجه داشته باشید که در صورت خلاصه نویسی ، مقادیر تعیین نشده به صورت پیش فرض در نظر گرفته خواهند شد. برای توضیح این مطلب به مثال زیر دقت کنید

مثال به صورت خلاصه نویسی شده / در این مثال مقادیر font-style , font-variant تعیین نشده اند

p {

  font:bold 1em/1.2em georgia,"times new roman",serif;

}

مثال به صورت خلاصه نویسی نشده و واقعی / مقادیر تعیین نشده به صورت پیش فرض تعیین مقدار می شوند

p {

  font-style:normal;

  font-variant:normal;

  font-weight:bold;

  font-size:1em;

  line-height:1.2em;

  font-family:georgia,"times new roman",serif;

}

نکته

برای تعیین مقادیر به صورت خلاصه نویسی شده برای اجزائی مانند h1-h6 , strong , small , em که به صورت پیش فرض دارای مقادیر منحصر به فردی هستند دقت بیشتری لازم است . در هنگام خلاصه نویسی خصوصیت Font برای این اجزاء دقت داشته باشید که تعیین نکردن مقادیر font-style, font-variant, and font-weight باعث تغییر در خصوصیات خواهد شد . برای درک این موضوع به مثال زیر دقت کنید

مثال به صورت خلاصه نویسی شده / در این مثال مقادیر font-style , font-variant , font-weight تعیین نشده اند

strong {

  font:12px verdana;

}

مثال به صورت خلاصه نویسی نشده و واقعی / مقادیر تعیین نشده به صورت پیش فرض تعیین مقدار می شوند و به طور مثال font-weight به صورت normal در خواهد آمد

strong {

  font-style: normal;

  font-variant:normal;

  font-weight: normal;

  font-size: 12px;

  line-height: normal;

  font-family:verdana;

}