آموزش تنظیمات پیشرفته فونت در CSS

ویژگی‌های فونت (قلم) در CSS امکان کنترل کامل ظاهر متن را می‌دهد: خانواده فونت، اندازه، ضخامت، حالت مورب و...

ویژگی‌های اصلی:

• font-family | font-style | font-variant | font-weight | font-size

۱. font-family (خانواده فونت)

انتخاب نوع فونت از لیست اولویت‌دار. چند فونت مشخص کنید (با , جدا کنید).

قوانین:

• فونت‌های دلخواه اول لیست
• خانواده عام آخر لیست: serif | sans-serif | monospace | cursive | fantasy
• نام چندکلمه‌ای در "دابل کوتیشن"

مثال:

body {
  font-family: "Vazir", Tahoma, Arial, sans-serif;
}

p.special {
  font-family: "Courier New", monospace;
}

نتیجه:

 اگر Vazir موجود نبود → Tahoma → Arial → sans-serif سیستم

۲. font-style (حالت فونت)

سبک ظاهری متن: معمولی، مورب، کج.

مقادیر:

مثال:

p.normal  { font-style: normal; }
p.italic  { font-style: italic; }
p.oblique { font-style: oblique; }

۳. font-size (اندازه فونت)

کنترل اندازه متن با روش‌های مختلف.

کلمات کلیدی (Keyword)

مطلق: xx-small | x-small | small | medium | large | x-large | xx-large نسبی: smaller | larger

مثال:

body    { font-size: large;    }  /* پایه */
h1      { font-size: x-large;  }
p.small { font-size: smaller;  }

پیکسل (px) - دقیق اما محدود

h1 { font-size: 36px; }
p  { font-size: 16px; }

مشکل: کاربر نمی‌تواند از مرورگر بزرگ/کوچک کند (دسترسی‌پذیری ضعیف).

Em - نسبی به والد (پیشنهادی)

۱em = اندازه فونت والد

• اگر body { font-size: 16px; } → 1em=16px | 2em=32px

مثال:

body { font-size: 16px; }
h1   { font-size: 2em;   }  /* 32px */
p    { font-size: 1em;   }  /* 16px */

ترکیب % + Em (بهترین روش)

برای به دست آوردن نتیجه مشابه در همه مرورگرها، اندازه قلم به طور پیش فرض روی درصد برای عنصر body تنظیم می شود. تنظیم اندازه قلم برابر با ٪۶۲٫۵، یک روش محبوب برای تنظیم اندازه قلم برای عنصر body است (یعنی ۶۲٫۵ درصد از px16 پیش فرض)، که برابر با ۱۰px یا ۰٫۶۲۵em است.

اکنون می توانید ویژگیfont-size را برای هر عنصر با استفاده از واحد em تنظیم کنید، با یک تبدیل، با تقسیم مقدار px بر ۱۰٫ این روش ۱۰px = ۱em, ۱۲px = ۱٫۲em, ۱۴px = ۱٫۴em, ۱۶px = ۱٫۶em, و … . مثال زیر را مشاهده کنید:

body { font-size: 62.5%; }  /* 62.5% از 16px = 10px → 1em=10px */
h1   { font-size: 2.4em; }  /* 24px */
p    { font-size: 1.4em; }  /* 14px */

مزیت: مقیاس‌پذیر در همه مرورگرها.

نکته: کنسرسیوم شبکه جهانی وب (W3C) توصیه می کند، برای ایجاد طرح های قوی تر و مقیاس پذیرتر، از مقادیر em یا درصد (٪) استفاده کنید.

۴. font-weight (ضخامت/توپری فونت)

درجه ضخامت متن.

مقادیر:

مثال:

p.normal { font-weight: normal;  }  /* 400 */
p.bold   { font-weight: bold;    }  /* 700 */
p.thin   { font-weight: 300;     }
p.heavy  { font-weight: 900;     }

نکته: همه فونت‌ها همه وزن‌ها را ندارند → نزدیک‌ترین انتخاب می‌شود.

۵. font-variant (نوع حروف)

تبدیل حروف کوچک به کوچک‌شده بزرگ (Small-caps).

مقادیر:

مثال:

h2 {
  font-variant: small-caps;
}

شورت‌کد font (ترکیبی)

همه ویژگی‌ها یکجا:

p {
  font: italic bold 16px/1.6 "Vazir", sans-serif;
}
/* ترتیب: style weight size/line-height family */