فونت‌ها یکی از مهم‌ترین عناصر طراحی وب هستند که تأثیر زیادی بر خوانایی، زیبایی و تجربه کاربری یک سایت دارند.

در CSS، چندین ویژگی برای کنترل استایل فونت‌ها وجود دارد که به کمک آن‌ها می‌توان ظاهر متن‌ها را سفارشی‌سازی کرد. در این راهنما، تمامی ویژگی‌های مربوط به استایل‌دهی به فونت‌ها در CSS را بررسی می‌کنیم.

۱. انتخاب فونت با font-family

ویژگی font-family برای تعیین نوع فونت مورد استفاده در متن به کار می‌رود. این ویژگی می‌تواند چندین مقدار داشته باشد که در صورت در دسترس نبودن یکی، از مقدار بعدی استفاده شود.

مثال:

p {
    font-family: 'Arial', 'Helvetica', sans-serif;
}

🔹 در این مثال، ابتدا فونت Arial در نظر گرفته می‌شود، اگر در سیستم کاربر موجود نباشد، Helvetica و در نهایت فونت sans-serif جایگزین می‌شود.

۲. تعیین اندازه فونت با font-size

ویژگی font-size برای تعیین اندازه فونت استفاده می‌شود و می‌تواند بر اساس مقادیر مختلفی تعیین شود:

مقادیر معمول برای font-size:

• پیکسل (px): مقدار ثابت و دقیق، مانند 16px.
• ام (em): نسبتی از اندازه فونت عنصر والد، مانند 1.2em.
• درصد (%): نسبتی از اندازه پیش‌فرض مرورگر، مانند 120%.
• ریشه rem: مشابه em اما بر اساس اندازه ریشه (html)، مانند 1.5rem.

مثال:

h1 {
    font-size: 24px;
}

p {
    font-size: 1.2em;
}

۳. تعیین ضخامت فونت با font-weight

ویژگی font-weight میزان ضخامت متن را مشخص می‌کند. مقدار آن می‌تواند عددی (مانند 100 تا 900) یا کلمات کلیدی مانند normal, bold, lighter, bolder باشد.

مثال:

h1 {
    font-weight: bold;
}

p {
    font-weight: 400;
}

✅ مقدار 400 معمولاً مقدار استاندارد برای متن‌های عادی است و 700 معادل bold است.

۴. تنظیم استایل فونت با font-style

ویژگی font-style برای تعیین استایل فونت به‌کار می‌رود و معمولاً برای تنظیم متن‌های ایتالیک یا نرمال استفاده می‌شود.

مقادیر قابل قبول:

• normal (پیش‌فرض)
• italic (کج)
• oblique (کج‌شده)

مثال:

p {
    font-style: italic;
}

۵. کنترل ارتفاع خط با line-height

ویژگی line-height برای تنظیم فاصله بین خطوط متن استفاده می‌شود و تأثیر زیادی بر خوانایی دارد.

مثال:

p {
    line-height: 1.5;
}

✅ مقدار 1.5 یعنی ۱.۵ برابر اندازه فونت ارتفاع بین خطوط تنظیم شود.

۶. تغییر فاصله بین حروف و کلمات

• letter-spacing: تنظیم فاصله بین حروف
• word-spacing: تنظیم فاصله بین کلمات

مثال:

h1 {
    letter-spacing: 2px;
}

p {
    word-spacing: 5px;
}

✅ letter-spacing: 2px; باعث افزایش فاصله بین حروف می‌شود.
✅ word-spacing: 5px; فاصله بین کلمات را افزایش می‌دهد.

۷. ترکیب ویژگی‌های فونت با font

به جای نوشتن چندین ویژگی جداگانه، می‌توان تمام ویژگی‌های فونت را در یک خط خلاصه کرد:

p {
    font: italic bold 16px/1.5 'Arial', sans-serif;
}

🔹 ترتیب نوشتن مقدارها در این ویژگی باید به‌صورت زیر باشد:

1. font-style
2. font-weight
3. font-size/line-height
4. font-family

۸. استفاده از فونت‌های سفارشی با @font-face

اگر بخواهید فونت‌های شخصی‌سازی‌شده را به سایت اضافه کنید، می‌توانید از @font-face استفاده کنید:

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/CustomFont.woff2') format('woff2'),
         url('fonts/CustomFont.woff') format('woff');
}

body {
    font-family: 'CustomFont', sans-serif;
}

✅ WOFF2 و WOFF برای استفاده در وب پیشنهاد می‌شوند، زیرا بهینه‌تر هستند.

نتیجه‌گیری

در CSS ویژگی‌های زیادی برای استایل‌دهی به فونت‌ها وجود دارد که می‌توان از آن‌ها برای کنترل نوع، اندازه، ضخامت، سبک و فواصل بین حروف و کلمات استفاده کرد. برای بهینه‌سازی خوانایی و جذابیت طراحی، بهتر است از ترکیب مناسبی از این ویژگی‌ها در طراحی وب خود استفاده کنید.