CSS Fonts
۱. خانواده فونتها (Font Families)
برای مشخص کردن فونت از خاصیت `font-family` استفاده میکنیم:
css
p {
font-family: Arial, Helvetica, sans-serif;
}
* چند فونت را پشت سر هم مینویسیم تا اگر فونت اول در دستگاه کاربر نبود، فونت بعدی استفاده شود.
* در آخر همیشه یکی از خانوادههای عمومی مثل `serif`، `sans-serif`، `monospace` و… را قرار میدهیم.
خانوادههای عمومی فونت:
* `serif` — فونتهایی که دارای تزئینات کوچک در انتهای حروف (مثل Times New Roman) هستند.
* `sans-serif` — فونتهای ساده و بدون تزئین (مثل Arial).
* `monospace` — فونتهای با عرض ثابت، معمولاً برای کدها.
* `cursive` — فونتهای شبیه دستنویس.
* `fantasy` — فونتهای تزئینی و فانتزی.
—
۲. ویژگیهای فونت
| خاصیت | توضیح | مثال |
| ————– | ——————————- | —————————— |
| `font-family` | تعیین نوع فونت | `font-family: “Georgia”, serif;` |
| `font-size` | اندازه فونت | `font-size: 16px;` |
| `font-weight` | ضخامت فونت (عادی، بولد، عددی) | `font-weight: bold;` یا `font-weight: 700;` |
| `font-style` | حالت فونت (عادی، ایتالیک، مایل) | `font-style: italic;` |
| `font-variant` | حالتهای خاص مثل حروف کوچک بزرگ | `font-variant: small-caps;` |
| `line-height` | فاصله بین خطوط | `line-height: 1.5;` |
—
۳. استفاده از فونتهای سفارشی
میتوان فونتهای دلخواه را با `@font-face` یا سرویسهایی مثل گوگل فونت استفاده کرد.
مثال استفاده از گوگل فونت:
html
<link href=“https://fonts.googleapis.com/css2?family=Roboto&display=swap” rel=“stylesheet”>
سپس در CSS:
css
body {
font-family: ‘Roboto’, sans-serif;
}
—
۴. مثال: استایل دادن به پاراگراف
css
p {
font-family: ‘Times New Roman’, serif;
font-size: 18px;
font-weight: 400;
font-style: italic;
line-height: 1.6;
}
دیدگاهتان را بنویسید