فونت‌ها (Fonts)

آشنایی با ویژگی‌های فونت در CSS: خانواده فونت، اندازه، ضخامت، استایل و فونت‌های وب

فونت در CSS

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

ویژگی‌های فونت

ویژگیتوضیحمثال
font-familyخانواده فونتTahoma, sans-serif
font-sizeاندازه فونت16px
font-weightضخامت فونتbold
font-styleاستایل فونتitalic
line-heightارتفاع خط1.6
font-variantنوع فونتsmall-caps
fontخلاصه همه (Shorthand)bold 16px Tahoma

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

می‌توان چند فونت پشت سر هم تعریف کرد — اگر اولی نبود، دومی استفاده می‌شود:

body {
        font-family: "Vazirmatn", "Tahoma", sans-serif;
    }
    
    /* اگر Vazirmatn نصب نبود → Tahoma */
    /* اگر Tahoma هم نبود → sans-serif عمومی */

دسته‌های فونت عمومی

دستهتوضیحنمونه فارسی
serifدارای پایکانه (خط کوچک)Times New Roman
sans-serifبدون پایکانه (مدرن)Tahoma, Vazirmatn
monospaceپهنای ثابت (کد)Consolas, Monaco
cursiveدستی و تزئینیComic Sans
fantasyفانتزی و خاصImpact

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

واحدتوضیحمثال
pxپیکسل ثابت16px
emنسبی به والد1.2em
remنسبی به ریشه ⭐1.2rem
%درصد از والد120%
vwنسبی به ویوپورت2vw
کلمات کلیدیاندازه از پیش تعریف‌شدهlarge

کلمات کلیدی اندازه

font-size: xx-small;
    font-size: x-small;
    font-size: small;
    font-size: medium;   /* پیش‌فرض — معمولاً ۱۶px */
    font-size: large;
    font-size: x-large;
    font-size: xx-large;

۳. ضخامت فونت (font-weight)

مقدارتوضیح
normal (۴۰۰)عادی
bold (۷۰۰)ضخیم ⭐
lighterنازک‌تر از والد
bolderضخیم‌تر از والد
100 تا 900عددی دقیق
p { font-weight: normal; }
    strong { font-weight: bold; }
    .light { font-weight: 300; }
    .heavy { font-weight: 900; }

۴. استایل فونت (font-style)

em { font-style: italic; }     /* کج */
    .normal { font-style: normal; } /* عادی */
    .oblique { font-style: oblique; } /* مورب */

۵. Shorthand (خلاصه همه)

/* ترتیب مهم است */
    p {
        font: italic bold 16px/1.6 Tahoma, sans-serif;
        /*      ↑     ↑    ↑   ↑   ↑
        /*   style weight size/line-height family */
    }

فونت‌های ایمن وب (Web Safe Fonts)

فونت‌هایی که روی اکثر سیستم‌ها نصب هستند:

فونت فارسیفونت انگلیسی
TahomaArial
Segoe UIHelvetica
Vazirmatn (با @font-face)Georgia
Iranian Sans (با @font-face)Times New Roman

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

@font-face {
        font-family: "Vazirmatn";
        src: url("fonts/Vazirmatn-Regular.woff2") format("woff2"),
             url("fonts/Vazirmatn-Regular.woff") format("woff");
        font-weight: normal;
        font-style: normal;
    }
    
    body {
        font-family: "Vazirmatn", Tahoma, sans-serif;
    }

فرمت‌های فونت

فرمتتوضیح
woff2بهترین فشرده‌سازی ⭐
woffفشرده‌سازی خوب
ttfفرمت سنتی
eotفقط IE (منسوخ)

استفاده از Google Fonts

/* در HTML */
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap" rel="stylesheet">
    
    /* در CSS */
    body {
        font-family: "Vazirmatn", sans-serif;
    }

ویژگی font-display

@font-face {
        font-family: "MyFont";
        src: url("my-font.woff2") format("woff2");
        font-display: swap;  /* فونت جایگزین را اول نشان بده */
    }
مقدارتوضیح
autoمرورگر تصمیم می‌گیرد
blockمتن نامرئی تا لود فونت
swapفونت جایگزین سریع ⭐
fallbackتعادل بین سرعت و ظاهر
optionalاگر سریع لود نشد، بی‌خیال

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط